html - パフォーマンスを落とさずに多数の円を追加するには?

Question

createljs を使用してシミュレーターを構築しているため、何千もの小さな円 (直径 3 ピクセル) が必要になります。形状グラフに円を描くことができますが、これは推奨される方法ですか? またはビットマップを使用しますか？

パフォーマンスの面で最善の方法について何か考えはありますか?

また、テキストのアンチエイリアスをオンまたはオフに設定することは可能ですか?

Answer 1

キャンバスの最適化については、次の記事を参照してください。

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

このペーパーでは、キャンバスを使用したさまざまなレンダリング手法を示します

easyjs について adobe には、AS3 から HTML5 に移行する開発者向けのガイドがあります。

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

この記事では、以前のオブジェクト定義から新しい Shape インスタンスを作成する方法を示します。

Answer 2

パフォーマンスを求める場合は、 を使用して形状をキャッシュすることを検討してくださいShape.cache(x,y,w,h)。これにより、ほとんどのブラウザーでいくつかの利点が得られます。EaselJS Git リポジトリにあるキャッシュのデモを確認してください。この例では、Safari 6 は逆の効果 (キャッシングが遅い) を持っていることに注意してください。これは、Safari がすでにグラフィックスに対して優れた最適化を行っており、GPU 上の多くの小さなオブジェクトの処理が不十分であるためです。

形状が時間の経過とともに大幅に変化する場合、キャッシュは適切なオプションではない可能性があります。