DrawImage（）を使用してCanvasに畫(huà)像を追加する鍵は、メソッドを正しく呼び出し、読み込み時(shí)間に注意を払うことです。 1. DrawImage（）を呼び出す前に、畫(huà)像が完全にロードされるまで待つ必要があります。それ以外の場(chǎng)合は、表示されないか、エラーが報(bào)告されない場(chǎng)合があります。オンロードコールバックを介して負(fù)荷が完了することを確認(rèn)する必要があります。 2。DrawImage（）には、3つのパラメーター形式があります?；镜膜适褂茫ㄍ耆十?huà)像を描く）、サイズのスケーリング、トリミング、描畫(huà)。 3.一般的な問(wèn)題には、畫(huà)像パスエラー、クロスドメイン制限、および複數(shù)の畫(huà)像読み込みコントロールが含まれます。開(kāi)発者のツールによって解決することができます。パス、サーバー構(gòu)成COR、またはPromise.allを使用してください。これらのキーポイントをマスターし、drawimage（）をスムーズに使用します。

実際、 drawImage()を使用してキャンバスに畫(huà)像を追加することは難しくありません。重要なのは、メソッドを呼び出し、荷重時(shí)間に注意を払う方法を把握することです。

CanvasはHTML5が提供する描畫(huà)領(lǐng)域であり、 drawImage()そのAPIの1つであり、特に畫(huà)像の描畫(huà)に使用されます。ただし、初心者は、寫(xiě)真を表示しない、誤ったパラメーター、非同期負(fù)荷の問(wèn)題など、使用するときに立ち往生する傾向があります。次のポイントは、絵をスムーズに描くのに役立ちます。

畫(huà)像がロードされていることを確認(rèn)してください

これは最もエラーが発生しやすいものです。DrawImage drawImage()を呼び出す前に畫(huà)像が完全にロードされるまで待つ必要があります。そうしないと、描畫(huà)されないか、エラーが報(bào)告される場(chǎng)合があります。

 const img = new Image（）;
img.src = 'image.png';

img.onload = function（）{
  ctx.drawimage（img、0、0）;
};

• ローカルファイル（ユーザーアップロードなど）からロードする場(chǎng)合は、同様の方法でも処理する必要があります。

• このように書(shū)かないでください：

   const img = new Image（）;
  img.src = 'image.png';
  ctx.drawimage（img、0、0）; //?畫(huà)像がまだロードされていない場(chǎng)合があります

drawimage（）のいくつかのパラメーター形式

drawImage()を呼び出すには3つの方法がありますが、最も一般的に使用されるのは最初の2つです。

1. 基本的な使用（完全な絵を描く）

    ctx.drawimage（image、dx、dy）;

   • imageはあなたの畫(huà)像オブジェクトです（畫(huà)像、キャンバス、ビデオ）
   • dxとdyはキャンバスの開(kāi)始座標(biāo)です

2. サイズのサイズ

   ctx.drawimage（畫(huà)像、dx、dy、dwidth、dheight）;

   • dWidthとdHeight 、図面の幅と高さを制御し、寫(xiě)真を拡大するために使用できます

3. 作物と描畫(huà)（高度な使用）

    ctx.drawimage（畫(huà)像、
     sx、sy、sheight、sheight、//ソースグラフの領(lǐng)域DX、dy、dwidth、dheight //キャンバスに描かれた位置とサイズ）;

   この使用法は、部分的な拡大またはパズル効果に適しています。

FAQと提案

• ?イメージパスエラー： img.src正しいURLであることを確認(rèn)し、ブラウザ開(kāi)発者ツールを介してリクエストが成功しているかどうかを確認(rèn)できます。
• crossクロスドメインの問(wèn)題：別のWebサイトから畫(huà)像を読み込み、Pixel操作を?qū)g行する場(chǎng)合（GetImagedAtaなど）、サーバーはクロスドメインアクセスを許可する必要があります。そうしないと、エラーが報(bào)告されます。
• cultive複數(shù)の畫(huà)像の読み込み：複數(shù)の畫(huà)像を描きたい場(chǎng)合は、カウンターまたは約束を使用できます。すべてを制御してから描畫(huà)します。

例（複數(shù)の寫(xiě)真の読み込み）：

 loadedcount = 0とします。
const totalimages = 2;
const images = [];

function imageLoaded（）{
  LoadedCount;
  if（loadedcount === totalimages）{
    //すべての寫(xiě)真がロードされ、ctx.drawimage（畫(huà)像[0]、0、0）の描畫(huà)を開(kāi)始します。
    ctx.drawimage（畫(huà)像[1]、100、100）;
  }
}

for（let i = 0; i <totalimages; i）{
  const img = new Image（）;
  img.src = `image $ {i} .png`;
  img.onload = imageloaded;
  Images.Push（IMG）;
}

基本的にそれだけです。読み込み順序とパラメーターの使用法をマスターする限り、 drawImage()を使用してキャンバスに畫(huà)像を追加することは複雑ではありませんが、詳細(xì)を無(wú)視するのは簡(jiǎn)単です。

以上がdrawimage（）を使用してキャンバスに畫(huà)像を追加する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。