在繪圖之前等待圖像加載
嘗試將圖像添加到畫布時,確保在之前加載圖像至關重要試圖畫它。您在程式碼中遇到的問題是由於圖像載入的非同步特性造成的。
要解決此問題,您需要在映像的 onload 事件中新增回呼函數。此回調函數將在圖像載入完成時執行,確保在嘗試繪製圖像之前圖像資料可用。
下面更正的程式碼將等待圖像加載,然後再將其繪製到畫布上:
<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>
以上是為什麼我的畫布圖像無法繪製?異步圖像載入的重要性。的詳細內容。更多資訊請關注PHP中文網其他相關文章!