儘管我的程式碼看起來正確，為什麼我的圖像沒有出現在 HTML5 畫布上？

在 HTML5 Canvas 上繪製圖像

您正在嘗試將圖像添加到畫布，但它仍然難以捉摸。讓我們揭開這項難以捉摸的努力背後的秘密。

您的程式碼看起來不錯，所以問題一定出在其他地方。您缺少的關鍵步驟是確保在嘗試繪製圖像之前加載圖像。

這是修改後的解決方案：

<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中文網其他相關文章！