HTML5キャンバスでX個の円を描く最も速い方法は何ですか？

キャンバス描画のスピードに関する簡単な質問。HTML5キャンバスでX個の円を描く最も速い方法は何ですか？

1つのキャンバスに100個の円を描いたり、100個のキャンバスに1個の円を描画する方が速いでしょうか？

2017-02-21 Max

私はまだパフォーマンステストを行っていない

は、私が最初にここにそれを照会しようと思いました。パスメソッドを使用しています。スクリーンキャンバスを描くことによってあなたは何を意味しますか？これはすべての円が同じであると仮定していますか？ – Max

複数のワーカーにバッファを用意し、それらをまとめてキャンバスに入れます。これは直接描画コマンドを使用するよりも難しくなければなりません –

これは1つのケースの問題であり、すべてがあなたの要件に合わせて "テストテストを行う"ようになります。単一の色を持つ単一サイズの円の場合、putImageDataは、最も高いエンティティ数（> 5000）で最も高速です。以下では、drawImage（offscreenCanvas）は必要なだけ速いです。同じ色で常に変化するサイズのサークルに対して、すべてのサークルで構成される単一のパスは、最大20000個のエンティティまで高速化できます。だから自分自身、絶えず変化する大きさのサークルを15,000以上の円で20色以上のグループに分けて（ええとプロット...）私はサークルを色で並べ替え、単一のパスオプションで描画します。 – Kaiido

-1

は、1枚のキャンバスに100円を描くように非常に簡単です：

あなたはそれが1キャンバス* 100円、または100枚のキャンバス* 1円、あなたはまだ言っているかどうかを、と呼ばれる同じアクションを持っている場合正確な同じ量の時間を描画するプログラム。

違いは何ですか？

プログラムに100個のキャンバスを導入すると、プログラムをバックグラウンドで保存する必要があるため、プログラムの実行速度が大幅に低下します。速度はあまり低下しませんが、それでも減少します。

1つのキャンバスのもう1つの利点は、1つのキャンバスを100個のキャンバスではなくすべてのもので制御するほうがずっと簡単だということです。

編集：1つのキャンバスで、サークルを重複させることもできます（必要な場合）。しかし、100個のキャンバスがある場合、サークルは重複することはできません。私はこれがあなたを助け願っています:)

出典

2017-02-21 16:23:24

HTML5キャンバスでX個の円を描く最も速い方法は何ですか？

答えて

関連する問題