キャンバスに画像を追加する方法

HTML キャンバスでは、画像を組み込むことで作品を強化できます。ただし、そうしようとすると困難に遭遇するとイライラすることがあります。この記事は、プロセスをガイドし、一般的な問題について説明し、解決策を提供することを目的としています。

問題: 既存の画像ソースがあり、JavaScript エラーがないにもかかわらず、画像が表示されません。 the Canvas.

解決策: キャンバスに画像を描画する前に、画像が完全にロードされていることを確認することが重要です。以下に示すように、コードを変更して画像に onload イベント リスナーを含めます:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}

この簡単な調整を組み込むことで、画像が読み込まれた後にキャンバスに正常に表示されるようになり、視覚的な要素でデザインを強化できるようになります。