6

fpsを使用する場合、1つの大きなキャンバスを使用して常に再描画する方が速いですか、それとも小さなキャンバスをたくさん用意して再描画の頻度を減らしますが、このようなアニメーションにはcss3を使用しますか?

<canvas id="1" width="60px" height="60px"></canvas>
<canvas id="2" width="60px" height="60px"></canvas>
<canvas id="3" width="60px" height="60px"></canvas>
<canvas id="4" width="60px" height="60px"></canvas>
4

2 に答える 2

3

理論的には、再描画が必要なものだけを再描画するアルゴリズムをプログラムし、再描画メソッドが一度に実行されると仮定すると、実際には1つのキャンバスの方が高速です*。再描画メソッドは、ブラウザーが実行できる最も要求の厳しいアクションの1つです。少ないほど良い。

ただし、そのようなシステムを実現するために必要なコードの量は、最終的には努力する価値がないでしょう。保守性と拡張性の目的で、複数のキャンバスを使用することに固執します。

これが私が学んだ他のいくつかの最適化のトリックです：

  • キャンバス全体をクリアするのは、特定の領域をクリアするよりも時間がかかるようには見えません。実際には、すべてのオブジェクトをループして個別にクリアするよりも高速です。

  • setTimeoutすべてのフレームを確認することが重要なアニメーションに最適です。requestAnimationFrame能力の低いマシンではフレームをスキップできます。

  • 描画を試みる前に要素が範囲内にあるかどうかを確認すると、canvas APIがこれを実行している場合でも、CPUサイクルを節約できます。

*単一の再描画を呼び出すには、キャンバスdisplayをに設定し、コンテキストが変更された後にnone戻ることができます。block

于 2012-08-11T13:42:25.313 に答える
0

複数のキャンバスを使用するとパフォーマンスが向上します。これは、キャンバスが 1 つしかない場合、複数のキャンバスを使用して同時に描画するよりも、ブラウザが同じキャンバスに繰り返し描画する方が遅くなるためです。同じキャンバスに再描画する必要がある場合、何か新しいものを描画するたびにサーフェスを更新する必要があるとします。他のキャンバスが何をしているかに関係なくいつでも描画できるため、複数のキャンバスがある場合は明らかにそうではありません。

キャンバスのパフォーマンス

于 2012-08-11T10:46:36.167 に答える