どちらが高速ですか - キャンバスやピクセル操作を積み重ねますか？

Question

私はいくつかのHTML 5の機能を使って小さなテトリスクローンを作っています。私はいくつかのジレンマに遭遇しました。

私のテトロミノはブロックで構成されていません。回転に依存する陰影と影があり、それぞれが独自の画像です。つまり、ゲームの状態が変わるたびに、通常の「再描画すべて」を使用することはできません。これは、ピースのドロップ履歴をすべて記録し、ラインをクリアするたびに「再生」することを意味するためです。

だから私のオプションは以下のとおりです。

1）互いの上に積層された2つのcanvas要素を作成します。背面のものが「ボード」画像です。一番上にあるのは作品を簡単にスライスして並べ替えることができる作品のキャンバスです。私はすべてを1つのキャンバス要素に保存したいと思っていたので、これは非常にハック感があります。

2）「描画」コンテキストと「バッファ」コンテキストを作成します。バッファのコンテキストでは、すべての部分を自由に操作できます。バッファを画面に描画するときは、getImageDataを使用して、すべてのピクセルをループし、それらをボードイメージに合成します。次に、putImageDataを使用してこれを「描画」コンテキストに書き込みます。この難題は、ImageData構造体をキャンバス要素に合成する方法が見つからないためです（drawImageを使用してImageElementsで行うことはできますが、drawImageはImageData構造体を使用しません）。

いずれの解決策も私にとって非常に優雅なようです。

ありがとうございました

Answer 1

レイヤーキャンバスについては何も 'ハッキリしません'。

類似の戦略は、古いコイン式コンソールから現代GPUまで、80's 8ビットの家庭用コンピュータを通過する多くのシステムでいくつかのレベルで実行されています。これは古典的な手描きの漫画（透明酢酸塩に描かれています技術）。

実際には、他の種類の操作を行っても、多くの理由でレイヤリングする必要があります。