HTML5 JavaScript画布动画类方法在函数内调用

Question

我在循环内的HTML 5画布上绘制动画时遇到问题。我创建了一个javascript动画函数/类来存储帧和持续时间信息，并为getFrame（）[返回图像]子函数提供一个get函数来检索相关的帧。这完全正常，所以我没有包括完整的脚本。如果有人想要或需要，我会发给你。

当我调用以下代码时，它会按预期显示动画。

canvas.drawImage(tile1a.getFrame(),50,60);
canvas.drawImage(tile1a.getFrame(),50,90);
canvas.drawImage(tile1a.getFrame(),50,120);
//etc

这不是很有效，因为我想绘制很多瓷砖是列，所以最好使用for循环。因此，我尝试了以下代码，但页面一直在崩溃。

for (i=1;i<=10;i++)
    {
        canvas.drawImage(tile1a.getFrame(),FIELD_WIDTH,i*30);
    }

然而，我尝试了下面的工作：

var temp = tile1a.getFrame();
for (i=1;i<=10;i++)
    {
        canvas.drawImage(temp,FIELD_WIDTH,i*30);
    }

所以问题肯定是我在for循环中调用getFrame（）。我认为它可能是非常愚蠢的东西，但我无法理解它！

非常感谢任何帮助。 谢谢 杰森

Answer 1

我想我明白了。 draw函数中的循环设置如下：

for (i=1; i<=10; i++) {
    // ...
}

请注意，您没有使用i关键字创建var变量！这意味着它将是一个全局变量！

现在查看getFrame函数中的循环：

for (i=0; i<this.frames.length; i++) {
    // ...
}

该循环中的i 也是全局...

您的getFrame功能确保i始终会重置为4（因为您只有四个帧）！

快速解决方法是添加一些var s：

// in the `draw` function, for example
for (var i = 1; i <= 10; i++) {
    // ...
}