我正在使用 Canvas 进行游戏。我有一个 Sprite 对象,它将自身绘制到 Canvas 上,在 Sprite 类中,当我创建该对象时,我创建了 Image 成员及其 src 属性。
这是不起作用的代码:
Sprite.prototype.draw = function(Context){
this.Image.onLoad = function(){
Context.drawImage(this.getImage(),this.getX(),this.getY());
};
};
在对象构造函数中,我传入一个字符串参数,它是图像的文件路径 - 这是正确存储的。
我感觉问题出在 setImage 函数上:
Sprite.prototype.setImage = function(){
this.Image = document.createElement('img');
this.Image.src = this.getImagePath(); //This just returns the path as a
string
};
我在运行时没有收到错误...但图像没有绘制到屏幕上?
谁能指点一下这是怎么回事吗?我已经搜索过这个问题的答案,但在每个人中,所有元素都是在 html 文档中创建的,而我的所有元素都是动态创建的,不知道这是否有任何区别。
干杯
最佳答案
您的代码构建在同步模型上,但您正在使用异步调用,这意味着这不会像您预期的那样工作。
您首先在图像对象上设置一个 url,这意味着立即调用加载过程。然后,当您调用绘制时,图像可能已经加载,也可能尚未加载(如果它存在于缓存中,此过程通常是即时的),因此当您设置 onload 处理程序(必须是小写)时,图像对象可能会通过该阶段将永远不会被调用(浏览器不会等待它被设置)。
为此,您需要使用不同的模型,例如回调和/或 promise 。为了简单起见,回调就可以了。
一个例子是:
Sprite.prototype.setImage = function(callback){
this.Image = document.createElement('img');
this.Image.onload = function() {
callback(this); /// just for ex: passing image to callback (or other inf)
}
this.Image.src = this.getImagePath();
};
Sprite.prototype.draw = function(Context){
Context.drawImage(this.getImage(), this.getX(), this.getY());
};
这样,当图像加载后,它将调用您指定为回调的函数,再次举例:
var sprite = new Sprite(); /// pseudo as I don't know you real code
sprite.setImagePath('someurl');
sprite.setImage(imageLoaded);
function imageLoaded() {
sprite.draw(context);
}
(我个人会合并 setImagePath
和 setImage
- 保持简单。)
关于javascript - Canvas :drawImage 未将图像绘制到 Canvas 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19546035/