Processing.js提高了绘图性能

Question

我使用processing.js在canvas上绘制一些形状。

如果我画出超过100-200个不断在画布上移动的圆圈，FPS会显着下降。如果我删除了绘图，则FPS会回到60，因此其他任务不会影响FPS。

fill(mR,mG,mB);
ellipse(mX,mY,mRadius,mRadius);

我知道，例如，对于复杂的形状，您可以将它们绘制到内存中的另一个画布上以缓存它们，然后将该画布简单地绘制到主画布上。

有没有办法改善这种绘图性能？

一些可能有用的链接：
http://www.html5rocks.com/en/tutorials/canvas/performance/
http://ramkulkarni.com/blog/improving-animation-performance-in-html5-canvas-part-ii/

但是我不能在我的上下文中使用任何这些，或者将它们与Processing.js集成。

编辑： 实际上它似乎可以在fps开始下降之前处理~1000形状。在谷歌浏览器上测试，在i5处理器和GTX660 gpu上启用GPU渲染。

http://jsfiddle.net/Lfmfz/2/

我猜这已经很不错了，但有没有办法挤出一些额外的FPS？

Answer 1

1. 确保您使用for循环或类似的东西来呈现这些形状。如果您不这样做，自然会慢一点。
2. 如果你可以在不调用填充每个椭圆的情况下离开，那将改善运行时间。如果可以的话，尝试将所有红色形状放在一起，将所有蓝色形状放在一起，等等。
3. 摆脱不必要的计算。例如，如果ellipse()位于random()个计算位置，或new Random(1)和nextGaussian()位于一起（最后一个极其慢），然后创建局部变量或单独使用Math.random()（据我所知，这似乎更快）。
4. 您可以使用抗锯齿的imageData，但可能并非所有设备都支持。我使用它，但我不确定HTML上的运行时，以及所有那些for循环都可能变得......凌乱。

<强> TL; DR
不要使用太多的计算，不要做多余的事情，而尤其不要反复调用椭圆，反复过来，反复过来。 ....没有迭代。