HTML画布动画断断续续

html canvas animation stutter

本文关键字：动画断断续续布动画 HTML 更新时间：2023-09-26

谁能解释为什么提供的画布动画口吃?我创建了一个测试存根来演示这个问题。

我看到FF, Chrome, IE在桌面和FF和Chrome在Android上的结巴。

是由于垃圾收集的口吃?似乎raf在每次调用时都会生成double，这最终需要gc。如果gc是原因，那么html5动画就完蛋了。叹息。

同样的问题在一年前被问过，但因为我是新成员，我无法联系作者来找出他的解决方案。HTML5 Canvas DrawImage口吃/起伏。一个新用户没有办法引起另一个用户的注意，这真是太糟糕了，因为其他问题的作者可能有我正在寻找的信息，只是没有发布而已。我试着在他的问题上发帖，试图引起他的注意，但我的帖子被删除了，因为违反了规则(这是)。看来我别无选择了。共和党的鸡和蛋问题

好了，在苦苦思索了1.5天后，我想我有了答案。它似乎浏览器与监视器同步，我猜这是调用requestAnimationFrame的点。在多监视器系统上运行时，同步机制似乎会混淆。我有三台显示器。当我断开除一个显示器外的所有显示器并重新启动浏览器时，问题似乎就消失了。这种情况是有道理的，因为这个问题偶尔会出现，即我猜当一个给定的显示器与哪个显示器不同步时，哪个显示器正在向浏览器提供vsync。

因为我不确定这一点，我希望别人能证实或推翻我的理论。我会用不同的显示器配置继续(重新)测试，但如果能从另一个人那里得到确认就更好了。

编辑01:我不是完全疯了。http://news.softpedia.com/news/firefox -夜间-增加-支持- - - - - - - vsync - -平滑动画- 360245. shtml

编辑02:一些chrome用户/开发者已经发现了这个或相关的问题。这个问题终于可以解决了。见https://code.google.com/p/chromium/issues/detail?id=422000。顺便说一句，IE11+没有这个问题。开始使用IE11进行基线测试，因为chrome最近有质量保证问题。

编辑03:刚刚遇到了这个类似的问题。第一个答案提供了很好的信息。Chrome requestAnimationFrame问题