在 Javascript 实例上绘制图像
发布于2023-09-21 20:55 阅读(1156) 评论(0) 点赞(25) 收藏(2)
I don't understand why the method drawImage doesn't work on the Canvas2D instance.
But when I put it in a setTimeout method it work, why?
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 秒超时后，图像很可能已在该时间内加载完毕。上面的代码等待图像加载，然后绘制它。（所以如果它在不到一秒的时间内加载它可以更早地绘制它，并且如果它需要超过一秒它也不会失败）
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/531585/ced63faa43ee4d2d0276/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力