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

标签 html animation canvas

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

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

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

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

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

Is there a solution for HTML5 canvas animation stutter?

最佳答案

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

关于HTML5 Canvas 动画偶发抖动/犹豫/卡顿,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9944961/

相关文章:

javascript - 将 Canvas 元素放在前面?

javascript - 将元素从附加列表传递到另一个页面

javascript - 更改 jquery show()/hide() 动画?

javascript - 使用 JavaScript 将 ID 添加到 Canvas

javascript - Html5 Canvas 游戏,创建比查看 Canvas 大得多的 map

html - 如何使 float DIV 列表出现在列中,而不是行中

html - 为什么我的内容之间会有这么大的差距

java - 添加组件到JPanel,屏幕上没有变化

javascript - 使用 Javascript vanilla 为元素添加动画

node.js - 图像没有方法 'getContext'