私はツリー内に複数のキャンバスを持つゲーム用の小さなグラフィック エンジンを作成しました (これらは基本的にレイヤーを表します)。レイヤーは drawImage() を介してその親にコピーされ、それがその親にコピーされ、ルート レイヤー (画面上のキャンバス) まで続きます。影響を受ける層。ただし、何も変更されないフレームでは、レンダリングも drawImage() 呼び出しも行われず、フォアグラウンド オブジェクトのみが移動するフレームでは、レンダリングと drawImage() 呼び出しは最小限に抑えられます。
この記事で説明されているように、これを複数の画面上のキャンバスをレイヤーとして使用する場合と比較したいと思います。
http://www.ibm.com/developerworks/library/wa-canvashtml5layering/
オンスクリーン キャンバス アプローチでは、レイヤーごとにレンダリングを処理し、ブラウザーがレイヤーを画面に適切に表示するように処理します。私が行った調査と私が読んだすべてのことから、これは一般に、drawImage() を使用して手動で処理するよりも効率的であると認められているようです。だから私の質問は、各フレームが正確に何を変更したかについての私のインサイダーの知識にもかかわらず、ブラウザーは私よりも効率的に再レンダリングする必要があるものを判断できるでしょうか?
この質問に対する答えは、「両方の方法とベンチマークを実行する」であることはすでにわかっています。しかし、正確なデータを取得するには、実際のアプリケーションが必要であり、それは数か月先です。それまでに、許容できるアプローチがあれば、より大きな魚を揚げることができます. ですから、誰かがこの道を進んでいて、これについての洞察を提供できることを願っています。