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. 擺脫不必要的計算。舉例來說，如果你有定位由random()計算或new Random(1)和nextGaussian()在一起（這是上的最後一個極其慢）的ellipse() S，然後創建本地變量或單獨使用Math.random()（這似乎是更快，據我可以看到）。
4. 您可能使用抗鋸齒imageData，但可能不支持所有設備。我使用它，但我不確定HTML上的運行時，所有for循環可能會變得相當......凌亂。

TL; DR
不要使用太多的計算，沒有冗餘做任何事情，特別是不超過橢圓和一遍又一遍又一遍地又一遍地打電話一遍又一遍.....沒有迭代。