0

我用来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 吗？

4

1 回答 1

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

TL;DR
不要使用太多的计算，不要做任何多余的事情，特别是不要一遍又一遍地一遍又一遍地调用椭圆，一遍又一遍，一遍又一遍……没有迭代。

于 2016-01-10T20:07:16.957 回答