画像が HTML5 キャンバスに表示されないのはなぜですか?

HTML5 キャンバスへの画像の追加

HTML5 キャンバスに画像を組み込むと、その機能と視覚的な魅力が向上します。ただし、画像ソースを適切に設定して画像を描画したにもかかわらず、画像がキャンバスに表示されない場合は、次の点を考慮してください。

画像を描画する前に、画像が完全に読み込まれていることを確認することが重要です。キャンバス。準備が整う前に画像を描画すると、画像は表示されません。

この問題を解決し、画像が適切に表示されるようにするには:

1. onload イベント ハンドラーを使用します。 : onload イベント ハンドラーを image 要素にアタッチします。このハンドラーは、画像の読み込みが完了すると呼び出されます。
2. onload コールバックで画像を描画します: onload イベント ハンドラー内で、context.drawImage() メソッドを使用して画像を描画します。

このアプローチを示す更新されたコード スニペットを次に示します。

<code class="js">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);
  }
}</code>

onload コールバックを使用すると、画像が描画される前に画像が完全に読み込まれることが保証されます。キャンバス、画像が表示されない問題を解決します。

以上が画像が HTML5 キャンバスに表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。