javascript - Canvas - 从原型(prototype)中绘制图像

标签 javascript html canvas prototype

我正在使用原型(prototype)模式编写一些基本代码。我正在尝试将图像绘制到 Canvas 上,但它不起作用。我已经在 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);
    };

}

知道为什么吗?

最佳答案

在图像有机会加载之前,您的 if(self.bgReady) 正在接受测试。

所以自然会是 false 并且 drawImage 不会被执行。

使固定:

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

祝你的项目好运!

关于javascript - Canvas - 从原型(prototype)中绘制图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22275238/

相关文章:

javascript - Canvas 对象上的 Fabric JS 事件

javascript - 在PaperJS中,是否可以将多个项目组合在一起,使它们作为一个整体移动?

javascript - 在 Canvas 上单击绘制圆圈

javascript - 打开控制台中的数字/打印

javascript - 从 iframe 获取文本

javascript - 向子菜单下拉列表添加延迟 - bootstrap3

javascript - 创建秒表/计时器以及 60fps 的 Canvas 动画

javascript - 带有ngClass的Javascript Angular 4 eventEmitter

javascript - 仅返回所有数组中找到的值

html - 我应该如何使此代码内联显示