Question

canvas为什么不能显示图片

var img = new Image();
if (isWin) {
img.src = "lib/pass.png";
}else{
img.src = "lib/fail.png";
}
console.log(game.ctx,img);
game.ctx.drawImage(img,100,150)
打印 结果：CanvasRenderingContext2D {canvas: canvas#map, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true…}
<img src=​"lib/​fail.png">​


​

Answer 1

当Image对象的src被设置后，图片才开始被加载到网页缓存数据中，全部加载完成以后Image对象触发onload事件回调。如果直接设置完src属性后立即使用drawImage去读取图片数据，那么图片尚未加载完成（此时是读不到的）。因此你需要给image.onload属性设置一个回调函数，在这个函数里绘制canvas。