Question

我正在使用原型模式编写一些基本代码。我试图将图像绘制到画布但它不起作用。我在Chrome中调试了代码，因为image.onload没有触发。我不相信图片正在加载。

以下是控制此功能的两个功能。

var SimpleGame = function () {
self = this; //Reference to this function

//Canvas 
this.canvas = document.createElement("canvas");
this.ctx = this.canvas.getContext("2d");
this.canvas.width = 251;
this.canvas.height = 217;

//Default objects
this.bgReady = false;
this.bgImage = new Image();

}; 

var simpleProto = SimpleGame.prototype; //Cache the prototype

//Draw the objects on the canvas
simpleProto.draw = function() {

//Draw/ Render the canvas
document.body.appendChild(self.canvas);

//Draw the background
self.bgImage.onload = function() {
    self.bgReady = true;
};

self.bgImage.src = "images/background.png";

    if(self.bgReady) {
    self.ctx.drawImage(self.bgImage, 10, 10);
    };

}

知道为什么吗？

Answer 1

在图片有机会加载之前，您的if（self.bgReady）正在测试中。

所以很自然它会是假的，而且不会执行drawImage。

修正：

将self.ctx.drawImage放在self.bgImage.onload

中

祝你的项目好运！

画布 - 从原型中绘制图像

1 个答案: