javascript - 函数中的 image.onload - 为什么它不起作用？

Question

我是使用 JS 的新手。我想将有关对象的所有信息保存在一个地方。所以我做了这个功能：

function Obiekt(img) {
this.img = img;
this.ready = false;
this.image = new Image();
this.image.src = this.img;
this.image.onload = function() {
    ready = true;
};
this.x = 0;
this.y = 0;
this.rotation = 0;
}

然后我制作了我的对象，命名为 hero。

var hero = new Obiekt("images/hero.png");

问题是， hero.ready 总是错误的，我不能画这个。

if (hero.ready) {
     ctx.drawImage(hero.image, 0, 0);
}

你能帮助我吗？

Answer 1

两个问题：

• ready找不到
• 如果您的图像被缓存（取决于浏览器），则您使用的顺序无法正常工作，因为在您设置回调后不会加载图像。

这是一个解决方案：

var _this = this;
this.image.onload = function() {
    _this.ready = true;
};
this.image.src = this.img;

（我要补充一点，命名不是很好：我更imgsrc喜欢img）