呈現和交錯

Question

我有一個使用2d上下文的html 5畫布。我能夠達到每秒120幀，但渲染可以鋸齒狀，動畫只是跳躍。我想知道可能會導致它的任何想法，特別是如此高（但毫無意義）的幀速率？什麼是已知的方式或平滑動畫以及？

唯一可以想到的是，實際的圖紙沒有被計入。因此，儘管更新和繪圖功能可以快速運行，但畫布上的繪畫會稍後堆疊。這意味着我不會在每秒鐘創建一個真實的幀。

Answer 1

雖然，我可以得到每秒120幀，這真的意味着什麼。因爲我使用的是setTimeout，所以我不能保證時間會保持不變，因此，當它出現鋸齒時，這是因爲幀速率暫時顯着下降。

然而，在我設法找到的作品中有另一種選擇。我感到有點驚訝，這是多麼難找到。

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame http://dev.chromium.org/developers/design-documents/requestanimationframe-implementation

從我可以理解，該功能可以讓瀏覽器優化動畫。從理論上講，這應該給出更一致的幀速率，這應該會給出更流暢的動畫。

比較Chrome，Safari，Opera和Firefox的繪製效果也很有趣。我主要測試Chrome 14 dev和Mozilla Aurora 6.0a，它們的繪製方式看起來非常不同。 Chrome似乎可以直接繪製。 Firefox似乎正在管道像素，就好像它正在逐一發送它們一樣被繪製。

這使我對歌劇

http://www.scribd.com/doc/58835981/122/Double-Buffering-with-Canvas http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/

原來基於Webkit的瀏覽器和基於Gecko的瀏覽器在內部使用雙緩衝區，也就是說，它將所有繪圖函數一起收集起來，然後在函數線程返回時繪製它們。如果你有一個主循環功能，如update，它將不會繪製直到它已經返回。 Opera只是在繪圖函數被調用時繪製它們，但實現雙緩衝並不困難。可以說，這是平滑動畫的另一種方法。

也有另一種實驗性的功能，可以幫助以及

http://badassjs.com/post/4064873160/webgl-2d-an-implementation-of-the-2d-canvas-context-in