html5-canvas “ context.drawImage”是否不在画布上显示图像？
示例
使用尝试在画布上绘制图像对象之前，请确保已将其完全加载context.drawImage。否则，图像将无声显示。
在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()
//代码中起始位置的位置
}在尝试绘制任何图像之前先加载多个图像的示例
功能齐全的图像加载器更多，但是此示例说明了如何执行此操作。
//第一张图片
var img1=new Image();
img1.onload=start;
img1.onerror=function(){alert(img1.src+' failed to load.');};
img1.src="imageOne.png";
//第二张图片
var img2=new Image();
img2.onload=start;
img1.onerror=function(){alert(img2.src+' failed to load.');};
img2.src="imageTwo.png";
//
var imgCount=2;
//每次加载图像时都会调用start
function start(){
//倒计时，直到所有图像加载完毕
if(--imgCount>0){return;}
//现在已成功加载所有图像
//context.drawImage将成功绘制每个
context.drawImage(img1,0,0);
context.drawImage(img2,50,0);
}