キャンバスとレイヤーの部分を再描画する

Question

私はキャンバスを持っているとしましょう。上半分は常にアニメートされ、下半分はほとんど変更されません。私のシナリオでは、私はアニメーション化されていない/アニメ化されていない多くの異なるものを持っているので、私はお互いの上に多くのキャンバスを持っているのが好きではありません。

私がこれについて行っているのは、ページ全体にアニメーションを描画し、その上に下半分を描画することです。 上半分だけを描画し、下半分を再描画しない場合、速度を最適化しますか？それとも問題じゃないの？

ありがとう、私はすべての答えに感謝します。

Answer 1

キャンバスのパフォーマンスは、通常、変更するピクセル数に関係します。だからキャンバスの半分を描くだけで、キャンバスをクリアすることなく、は一般にキャンバス全体を更新するよりも速くなります。キャンバスに描画していないときは、基本的にイメージとして機能するため、CPUリソースを消費することにも注意してください。

ただし、すべてのパフォーマンス関連の質問と同様に、アドバイスを探すことはできません。一部の測定を実行します！

レンダリングのパフォーマンスをプロファイルするには、組み込みの開発ツール（F12）を使用します。画面の再描画矩形を有効にして、ブラウザのどの部分が再描画されているかを確認します。キャンバスの1つの部分の描画だけで、ブラウザが全体を再描画するかどうかを確認します。