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