私はモバイル Web ダイス シミュレーターに取り組んでいます。最初のプロトタイプはこちら: http://dicewalla.com
私は現在、すべてのサイコロを描く 1 つの大きなキャンバスを持っています。私は、より MVC で更新しやすい方法でコードを書き直すことを計画しています。大きなキャンバスにすべてのサイコロを描画し、その大きなキャンバスを更新し続けるよりも、ダイ オブジェクトごとに小さなキャンバスを生成する方が簡単だと思います。
私の質問は、ブラウザーが 1 つの大きなキャンバスに対して多くの小さなキャンバスを作成することで、パフォーマンスが低下するかどうかです。ローカルでテストするのは難しいです。ここの誰かがベストプラクティスを知っていることを願っていました。
パフォーマンスに関しては、前述のように、グラフィックを定期的に更新していない場合、キャンバス要素が 1 ～ 100 個の場合でもほとんど違いはありません。(例: 静的グラフィックス / アニメーションなし)
複数のキャンバスに関するネット上の参照のほとんどは、複数のレイヤーがあり、透明な他のものの上に描画を処理する必要がある場合に対処する傾向があります。
そうは言っても、dicewalla で行っていることは、複数のキャンバスを持つことから何かを得るようには見えません。
また、キャンバス全体の更新がボトルネックである場合は、単一のキャンバスの領域を選択的に再描画して、パフォーマンスを向上させることができます。これにより、これらの要素の管理と作成に対処する必要なく、複数のキャンバスを持つパフォーマンス上の利点が得られます。
複数のキャンバスを使用すると、選択的に再レンダリングできるため、通常はパフォーマンスが向上します。
キャンバスが 1 つしかなく、1 つのサイコロを更新したい場合は、通常、キャンバス全体を再描画する必要があります。一方、複数のキャンバスでは、再描画が必要なダイスのみを更新できます。それは効率の向上です。
さらに、1 つのキャンバスをロードする場合と 100 をロードする場合で、顕著な違いは見られないはずです。