javascript - Html5画布不绘图

Question

我有一个对象没有绘制它的图像的问题。我已将图像的 onload 属性设置为绘图功能..

//ctor
function Sprite(someargs,pContext)
    this.setContext(pContext); //This could be the problem?
    this.setX(px); 
    this.setY(py);
    this.setTexture(pImagePath);    


//I run this in the constructor 
Sprite.prototype.setTexture = function(pImagePath){
    this.texture = new Image();
    this.texture.onload = this.draw();  
    this.texture.src = pImagePath;
};

Sprite.prototype.draw = function(){

    this.getContext().drawImage(this.texture,this.getX(),this.getY(),100,100);
};

Sprite.prototype.setContext = function(pContext){
       this.mContext = pContext;
};

运行时没有错误，但图像没有绘制到画布上。我在上述所有方法中都设置了警报，所有这些方法都在执行。

任何人对为什么它不绘图有任何想法吗？

干杯

Answer 1

this.texture.onload = this.draw();  

您没有设置功能，而是onload设置功能的结果drawdraw

this.texture.onload = this.draw;

也不会很好，因为你会this在这里失去你的背景。 this函数内部draw将指向texture而不是Sprite

您需要bind将函数draw传递给this（目前是Sprite）并将其传递给onload

this.texture.onload = this.draw.bind(this);

或者：

var that = this;
this.texture.onload = function() { that.draw(); }