context.drawImage 是否在 Canvas 上顯示影象

在嘗試使用 context.drawImage 在畫布上繪製影象物件之前，請確保影象物件已完全載入。否則影象將無聲顯示。

在 JavaScript 中，不會立即載入影象。相反，影象是非同步載入的，並且在載入 JavaScript 的過程中，JavaScript 繼續執行跟隨 image.src 的任何程式碼。這意味著 context.drawImage 可以用空影象執行，因此不顯示任何內容。

在嘗試使用 .drawImage 繪製影象之前確保影象已完全載入的示例

var img=new Image();
img.onload=start;
img.onerror=function(){alert(img.src+' failed');} 
img.src="someImage.png";
function start(){
    // start() is called AFTER the image is fully loaded regardless 
    //     of start's position in the code
}

在嘗試使用任何影象繪製之前載入多個影象的示例

有更多功能齊全的影象載入器，但這個例子說明了如何做到這一點

// first image
var img1=new Image();
img1.onload=start;
img1.onerror=function(){alert(img1.src+' failed to load.');};
img1.src="imageOne.png";
// second image
var img2=new Image();
img2.onload=start;
img1.onerror=function(){alert(img2.src+' failed to load.');};
img2.src="imageTwo.png";
//
var imgCount=2;
// start is called every time an image loads
function start(){
    // countdown until all images are loaded
    if(--imgCount>0){return;}
    // All the images are now successfully loaded
    // context.drawImage will successfully draw each one
    context.drawImage(img1,0,0);
    context.drawImage(img2,50,0);
}