requestAnimationFrame时，它不会返回常规的cd。
我一直在寻找有关该主题的所有帖子（试图将this函数作为匿名函数封装到动画中……），但是我仍然遇到同样的问题。
step()在class Sprite {
constructor(canvas, imageSrc) {
this.canvas = canvas;
this.img = new Image();
this.img.src = imageSrc;
this.height = 18;
this.width = 16;
this.scale = 4;
this.scaledWidth = this.scale * this.width;
this.scaledHeight = this.scale * this.height;
this.cycleLoop = [0];
this.currentLoopIndex = 0;
this.img.onload = () => {
this.init();
}
}
init() {
this.ctx = this.canvas.getContext('2d');
this.ctx.webkitImageSmoothingEnabled = false;
this.ctx.mozImageSmoothingEnabled = false;
this.ctx.imageSmoothingEnabled = false;
}
drawFrame(frameX, frameY, canvasX, canvasY) {
this.ctx.drawImage(
this.img,
frameX * this.width,
frameY * this.height,
this.width,
this.height,
canvasX,
canvasY,
this.scaledWidth,
this.scaledHeight
);
}
animate() {
requestAnimationFrame(this.step());
}
step() {
console.log(this);
console.log(this.ctx);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.drawFrame(this.cycleLoop[this.currentLoopIndex], 0, 0, 0);
this.currentLoopIndex++;
if (this.currentLoopIndex >= this.cycleLoop.length) {
this.currentLoopIndex = 0;
}
requestAnimationFrame(this.step());
}
}
中，第一个step()显示具有ctx属性的Character对象。由于某些原因，未定义第二个console.log(this)。
所以我得到一个：
console.log(this.ctx)答案 0 :(得分：2)
UnboundLocalError是在Sprite类的构造函数中定义的。
this.canvas = canvas;
不过是在图像的 onload 事件的回调函数中定义的。因此，我最好的猜测是，当您在Sprite实例上调用 animate（）方法时，onload事件尚未触发，因此未定义上下文。
答案 1 :(得分：1)
在定义step()之前，似乎正在调用ctx。最可能是因为在创建step()的{{1}}回调之前调用了img.onload()。
请确保在ctx之后致电step()。
或通过以下方法在init()中设置ctx：
constructor