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设置为draw功能，而是设置为draw功能的结果

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

Html5画布没有绘图

1 个答案: