我不明白为什么 drawImage 方法在 Canvas2D 实例上不起作用。
但是当我把它放在 setTimeout 方法中时它工作，为什么？
function Canvas2D() {
this._canvas = document.getElementById('screen');
this._canvasContext = this._canvas.getContext('2d');
}
Canvas2D.prototype.clear = function() {
this._canvasContext.clearRect(0, 0, this._canvas.width, this._canvas.height);
};
let Canvas = new Canvas2D();
let image = new Image();
image.src = './assets/sprites/spr_background.png';
// Doesn't work here
Canvas._canvasContext.drawImage(image, 33, 71);
setTimeout(() => {
// When I put it here it works
// Canvas._canvasContext.drawImage(image, 33, 71);
}, 1000);
必须加载图像才能正确绘制。如果你会做这样的事情：
image.onload = function(){
Canvas._canvasContext.drawImage(image, 33, 71);
}
它应该工作，我想......
在 1 秒超时后，图像很可能已在该时间内加载。上面的代码等待图片加载完毕，然后进行绘制。（所以如果它在不到一秒的时间内加载，它可以更早地绘制它，如果它需要超过一秒，它就不会失败）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句