HTML画布动画口吃 [英] html canvas animation stutter

问题描述

任何人都可以解释为什么所提供的帆布动画口吃？我创建了一个测试桩这表明了问题。

Can anyone explain why the provided canvas animation stutters? I've created a test stub which demonstrates the problem.

我看到在FF，铬，即口吃台式机和FF和Android版Chrome。

I see the stutter in FF, Chrome, IE on desktop and in FF and Chrome on Android.

时的口吃由于垃圾收集？看来即使是英国皇家空军的生成有关，最终需要GC每次通话双。如果gc为事业那么HTML5动画是pretty多DOA。叹了口气。

Is the stutter due to garbage collection? It seems even raf generates a double on each call which eventually requires gc. If gc is the cause then html5 animation is pretty much doa. Sigh.

同样的问题被问一年前，但因为我是新成员，我无法与作者联系，找出他的解决方案。 HTML5画布的DrawImage口吃/抖动现象。这实在是太糟糕了，没有办法为新用户获得其他用户的关注，因为其他问题的作者可能有我要找的信息，一个根本没有张贴。我试图张贴到他的问题，努力吸引他的注意力，但我的帖子有被删除的规则侵害（这是）。猜猜我出的选项。鸡和蛋的问题代表。

The same question was asked a year ago but because I'm a new member I'm not able to contact the author to find out his solution. HTML5 Canvas DrawImage Stutter / Choppiness . It is really too bad there is no way for a new user to get another user's attention, since the author of that other question may have the information I'm looking for, an simply hasn't posted it. I tried posting to his question in an effort to get his attention, but my post there was deleted as a rules violation(which is was). Guess I'm out of options. Chicken and egg problem with rep.

推荐答案

好了，拉我的头发1.5天之后，我想我有一个答案。看来浏览器垂直同步到监视器，我的猜测是调用requestAnimationFrame点。看来多显示器系统上运行时的同步机制可能会不知所措。我有三个显示器。当我拔下所有，但一台显示器并重启浏览器，这个问题似乎消失。这种品牌意识鉴于问题出现零星，即我猜当给定显示器失控与以往显示器是浏览器提供垂直同步同步。

Ok, so after pulling my hair out for 1.5 days I think I have an answer. It appears browsers vsynch to a monitor, which I guess is the point of calling requestAnimationFrame. It appears the synch mechanism can get confused when running on a multi monitor system. I have three monitors. When I disconnect all but one monitor and restart the browser, the problem appears to go away. This kind of makes sense given that the problem manifests sporadically, ie I'm guessing when a given monitor gets out of synch with which ever monitor is providing vsynch to the browser.

既然我不能肯定这个我希望其他人能够证实或击落我的理论。我将继续（再）用不同的显示器配置的测试，但它会很高兴获得来自另一个大脑的确认和设置的眼睛。

Since I'm not certain about this I'm hoping others can confirm or shoot down my theory. I'll continue to (re)test with different monitor configurations, but it would be nice to get confirmation from another brain and set of eyes.

编辑01：我不能完全坚果。 <一href=\"http://news.softpedia.com/news/Firefox-Nightly-Adds-Support-for-Vsync-for-Smooth-Animations-360245.shtml\" rel=\"nofollow\">http://news.softpedia.com/news/Firefox-Nightly-Adds-Support-for-Vsync-for-Smooth-Animations-360245.shtml

Edit 01: I'm not completely nuts. http://news.softpedia.com/news/Firefox-Nightly-Adds-Support-for-Vsync-for-Smooth-Animations-360245.shtml

编辑02：一些Chrome用户/开发者发现这种行为，或者相关的问题。最后，一​​些可能与这个问题来完成。请参见的https：//$c$c.google.com/ p /铬/问题/细节？ID = 422000 。 BTW，IE11 +没有这个问题。使用IE11基线测试开始，因为Chrome在最近的QA问题。

Edit 02: Some chrome users/devs has discovered this or a related problem. Finally something might be done with this issue. See https://code.google.com/p/chromium/issues/detail?id=422000. BTW, IE11+ does not have this issue. Started using IE11 for baseline testing, since chrome is having QA issues lately.

编辑03：碰到这个Q＆放刚跑;一个是相似的。在第一个答案好消息。 铬requestAnimationFrame

Edit 03: Just ran across this q&a which is similar. Good info in the first answer. Chrome requestAnimationFrame issues

这篇关于HTML画布动画口吃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！