HTML5 Canvas 动画偶发抖动/犹豫/卡顿

Question

在 Firefox 11 中，我在使用 HTML5 的 Canvas 和翻译的一些基本动画中遇到偶尔的抖动/犹豫/卡顿。

请看下面的例子... http://jsfiddle.net/ACRdx/

上面示例中的配置似乎在指定的移动速率下提供了最流畅的动画，当然偶尔出现卡顿除外。

有谁知道是什么导致了这种行为？

类似帖子中提供的建议似乎没有帮助，并且自 2011 年 6 月以来一直没有更新。此外，示例链接现在已损坏。请看...

Is there a solution for HTML5 canvas animation stutter?

Answer 1

尝试降低 FPS。可能是浏览器由于某种原因运行困难。我弄乱了你的代码，也可能是你的 imageMoveXDelta 太小了。我将它提高到 0.2，它运行起来非常流畅。除此之外，您应该尝试将其视为在完成之前运行的总帧数，以获得良好的混合效果。