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 渲染的 Google Chrome 上进行了测试。

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

我想这已经很不错了，但是有什么办法可以增加一些额外的 FPS 吗？

Answer 1

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

TL;DR
不要使用太多的计算，不要做任何多余的事情，尤其是不要一遍又一遍地调用椭圆，一遍又一遍，一遍又一遍，一遍又一遍......无需迭代。