画布：drawImage不将图像绘制到画布 [英] Canvas: drawImage not drawing image to canvas

问题描述

我使用帆布做游戏。我有一个Sprite对象绘制自己的画布，在Sprite类中，我创建的Image成员以及它的src属性，当我创建的对象。

这里的代码这不工作：

  Sprite.prototype.draw = function（Context）{
 this.Image.onLoad = function （）{
 Context.drawImage（this.getImage（），this.getX（），this.getY（））; 
}; 
}; 
 

在对象构造函数中，我传入一个字符串param，它是图像的文件路径 - 这是正确存储。

我有一个感觉问题在于setImage函数：

  Sprite.prototype.setImage = function（）{
 this.Image = document.createElement（'img'）; 
 this.Image.src = this.getImagePath（）; //这只是将路径返回为
 string 
}; 
  

我在运行时没有错误...但是图像没有被绘制到屏幕上？ p>

任何人能够指出怎么了什么？我搜索了这个问题的答案，但在所有的所有元素都是在html文档中创建的，而所有的我都是在飞行中创建的，不知道是否有什么区别。

干杯

解决方案

您的代码是建立在同步模型上，

您首先在图像对象上设置一个网址，这意味着加载的过程是立即调用。当你然后调用draw，图像可能或可能不会已经加载（如果它存在于缓存中这个过程通常是即时的），所以当你然后设置您的onload处理程序（必须是小写）图像对象可能是传递这个阶段，它永远不会被调用（浏览器不会等待它被设置）。

为了这个工作，你需要使用不同的模型，示例回调和/或承诺。为了简单起见，回调将会很好。

这样的例子可以是：

  Sprite.prototype.setImage = function（callback）{
 this.Image = document.createElement（'img'）; 
 this.Image.onload = function（）{
 callback（this）; ///只为ex：传递图像到回调（或其他inf）
} 
 this.Image.src = this.getImagePath（）; 
}; 
 Sprite.prototype.draw = function（Context）{
 Context.drawImage（this.getImage（），this.getX（），this.getY（））; 
}; 
  

这样当图片加载时，它会调用你指定的回调函数， ：

  var sprite = new Sprite（）; /// pseudo因为我不知道你真正的代码
 
 sprite.setImagePath（'someurl'）; 
 sprite.setImage（imageLoaded）; 
 
 function imageLoaded（）{
 sprite.draw（context）; 
} 
  

（个人我会合并 setImagePath 和 setImage - 保持简单。）

I'm using canvas for a game. I have a Sprite object which draws itself to the canvas, in the Sprite class I create the Image member along with it's src attribute when i create the object.

Here's the code that's not working:

Sprite.prototype.draw = function(Context){
    this.Image.onLoad = function(){
    Context.drawImage(this.getImage(),this.getX(),this.getY());
    };
};

In the objects constructor i pass in a string param which is the file path to the Image - this is being stored correctly.

I have a feeling the problem lies in a setImage function:

Sprite.prototype.setImage = function(){
    this.Image = document.createElement('img');
    this.Image.src = this.getImagePath(); //This just returns the path as a                                                                      
                                            string
};

I get no errors at runtime... yet the image is not drawn to the screen?

Anyone able to point out what's up? I've searched for answers to this but in everyone all the elements are created in the html document whereas all of mine are created on the fly, don't know if that makes any difference.

Cheers

解决方案

You code is building on synchronous model but you are using asynchronous calls which means this will not work as you might expect.

You first set an url on your image object which means the process of loading is invoked immediately. At the time you then call draw the image may or may not be already loaded (if it exists in the cache this process is usually instant) so when you then set your onload handler (which must be lower case) the image object is perhaps pass that stage and it will never be called (the browser doesn't wait for it to be set).

For this to work you need to use a different model, for example callbacks and/or promises. For simplicity callbacks will do just fine.

An example of this could be:

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());
};

This way when an image has loaded it will call the function you specified as callback, again just for example:

var sprite = new Sprite(); /// pseudo as I don't know you real code

sprite.setImagePath('someurl');
sprite.setImage(imageLoaded);

function imageLoaded() {
    sprite.draw(context);
}

(Personally I would merge setImagePath and setImage - keep it simple.)

这篇关于画布：drawImage不将图像绘制到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！