關於canvas無法通過drawImage載入的原因
阿新 • • 發佈:2019-01-01
在使用drawImage方法的時候,發現無法載入
var can = $('#mycanvas')[0];
var cxt = can.getContext('2d');
var bg = new Image();
bg.src = "img/bg.jpg";
cxt.drawImage(bg, 0, 0);
原因是圖片的載入時非同步的。在資源還沒有載入完成的時候就執行了drawImage所以無法成功載入到畫布當中。正確的寫法應該是保證圖片在onload以後才呼叫drawImage,而不是網上說的window.onload,因為我們的文件中並沒有IMG元素
var can = $('#mycanvas')[0];
var cxt = can.getContext('2d');
var bg = new Image();
bg.src = "img/bg.jpg";
//圖片資源載入時非同步的。必須保證圖片資源載入完成後才行
bg.onload = function() {
cxt.drawImage(bg, 0, 0);
}