Javascript Processing.js提高绘图性能

我使用

processing.js

在

画布上绘制一些形状

如果我在画布上画100-200多个不断移动的圆圈，FPS会显著下降。如果删除图形，FPS将返回到60，因此其他任务不会影响FPS

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

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

是否有任何方法可以改进此绘图性能

一些可能有帮助的链接：




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

编辑：
实际上，在fps开始下降之前，它看起来可以处理约1000个形状。在Google Chrome上测试，在i5处理器和GTX660 GPU上启用GPU渲染


我想这已经很好了，但有没有办法挤出一些额外的FPS

确保您正在使用for循环或类似的工具来渲染这些形状。如果您不这样做，自然会变慢
如果您不需要调用fill every eliple就可以离开，这将提高运行时间。如果可以，请尝试将所有红色形状放在一起，将所有蓝色形状放在一起，等等
摆脱不必要的计算。例如，如果您通过
random（）
计算或
new random（1）
和
nextGaussian（）
一起定位
椭圆（）
s，则创建局部变量或单独使用
Math.random（）
（据我所知，这似乎更快）
您可以使用抗锯齿图像数据，但并非所有设备都支持该功能。我使用该功能，但我不确定HTML上的运行时，所有用于循环的功能可能会变得相当混乱
TL；DR

不要使用太多的计算，不要做任何多余的事情，尤其不要一遍又一遍地调用ellipse，一遍又一遍地调用ellipse，而不进行迭代。
你能链接你的代码吗？试试pushMatrix（）和popMatrix（）？pushMatrix（）和popMatrix（）会怎么样帮助？我只是简单地调用ellipse 200次/帧，这就是代码。你应该发布一些代码或JSFIDLE…出于好奇，用Fabric.js重写它。在我的Chrome 26（macbook pro，os x）上可以达到35fps。如何在Fabric.js上看到fps？