如何添加大量的圈子而不會丟失性能？

當我使用createljs構建我的模擬器時，我需要有數千個小圓圈（直徑3個像素）。我可以在形狀圖上畫一個圓，這是一個推薦的方法嗎？或者我應該使用位圖嗎？如何添加大量的圈子而不會丟失性能？

有關性能方面最佳方式的任何想法？

另外，是否可以設置或禁用文本抗鋸齒？

2013-04-14 simo

圓圈是否靜態畫過？ – WiredPrairie

如果您正在尋找性能，請考慮使用Shape.cache(x,y,w,h)緩存您的形狀，這在大多數瀏覽器中提供了一些優勢。查看EaselJS Git倉庫中的緩存演示。請注意，Safari 6在該示例中具有相反的效果（緩存速度較慢），因爲Safari已經對圖形進行了很棒的優化，並且很難在GPU上處理很多小對象。

如果隨着時間的推移你的形狀發生了很大變化，那麼緩存可能不是一個好的選擇。

來源

2013-04-15 00:54:48 Lanny

謝謝，但是如何知道我的應用是否在Safari 6上運行，以避免緩存？ – simo

我不會說你應該「避免緩存」..這是一個非常具體的邊緣情況下，許多小的位圖和良好的矢量性能具有相反的效果 - 但是當緩存時通常會獲得淨增益（只要因爲你巧妙地做到了這一點）。你總是可以檢查用戶代理來檢查Safari。 – Lanny

我網站的大部分訪問者使用chrome/firefox/ie .. – simo

你可以查看以下文章來閱讀關於優化畫布。

http://www.html5rocks.com/en/tutorials/canvas/performance/

在本文中，我們將展示用帆布不同的渲染技術

關於easeljs Adobe已經爲開發商誰正在轉換從AS3到HTML5指南：

http://blogs.adobe.com/digitalmedia/2011/01/getting-started-with-the-canvas-element-and-easeljs/

在本文將介紹如何從以前的對象定義中創建一個新的Shape實例。

來源

2013-04-14 08:06:16 gartox

謝謝，但正如我使用EaselJS框架，我需要通過EaselJS的建議，因爲我不直接玩帆布，我是一個遷移腳本3開發人員.. – simo

我在這裏找到了一個很好的例子http：// banners .aquafadas.com/yann/testWebkit/EaselJS_v0_3_2/examples/cache.html – simo

發佈的示例@simo是隨EaselJS提供的舊版本。在CreateJS網站上可以看到最新的內容：http://createjs.com/#!/EaselJS/demos/cache – Lanny

如何添加大量的圈子而不會丟失性能？

回答

相關問題