コードが正しいように見えるのに、画像が HTML5 キャンバスに表示されないのはなぜですか?

HTML5 キャンバスに画像を描画

キャンバスに画像を追加しようとしていますが、まだわかりません。このとらえどころのない取り組みの背後にある秘密を明らかにしましょう。

コードは正常に見えるため、問題は別の場所にあるはずです。欠けている重要な手順は、描画を試行する前に画像がロードされていることを確認することです。

修正された解決策は次のとおりです:

<code class="html"><canvas id="viewport"></canvas></code>

<code class="css">canvas#viewport { border: 1px solid white; width: 900px; }</code>

<code class="javascript">var canvas = document.getElementById('viewport'),
    context = canvas.getContext('2d');

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

make_base();</code>

onload イベントを追加することによって画像のリスナーを使用すると、画像が完全にロードされ、キャンバス上に画像が存在することが保証されるまで描画を遅らせます。

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