问渲染和交错

EN

虽然，我可以得到每秒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是如何绘制的也是非常有趣的。我主要在Chrome14dev和Mozilla Aurora 6.0a上测试，它们的绘制方式看起来非常不同。Chrome似乎能够直接绘图。火狐似乎在用管道传输像素，就像是把它们一个接一个地送去绘制一样。

这就把我引向了Opera

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