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);
}