javascript - HTML5 Canvas でレイヤ化する最良の方法は?

Question

HTML5 キャンバスのさまざまなレイヤーで作業する必要がある場合、それを行う最善の方法は何ですか? position: absolute を使用して、複数のキャンバスを互いに積み重ねようとする人もいます。これが最善の方法ですか？

Answer 1

個人的には、canvas を重ねたりはしません。キャンバスは実際には、必要なすべてのピクセルを表示する単なるビットマップであるため、ほとんどの場合、必要なピクセルは 1 つだけです。

ライブラリを使用して、さまざまなオブジェクトを管理することをお勧めします。Grant Skinner のEaselJSは簡単に操作できることがわかりました。

このライブラリを使用すると、オブジェクトを簡単にグループ化してキャンバスに追加できます。また、マウス リスナーを追加してオブジェクトのクリックなどをキャプチャすることも簡単になります。これは、ライブラリなしでキャンバスを使用する場合に大量のコードを記述する必要があることです。 .

EaselJSに関するドキュメントと例もあります。

編集 ：

containerこれは、オブジェクトのグループ化に使用されるドキュメントからの抜粋です。

コンテナは、複合表示要素を操作できるネスト可能な表示リストです。たとえば、腕、脚、胴体、頭のビットマップをまとめて人物コンテナにグループ化し、それらをグループとして変換しながら、個々のパーツを相互に相対的に動かすことができます。コンテナの子には、親のコンテナと連結された変換およびアルファ プロパティがあります。たとえば、x=100 で alpha=0.5 の Shape を x=50 で alpha=0.7 の Container に配置すると、x=150 で alpha=0.35 のキャンバスにレンダリングされます。コンテナにはいくらかのオーバーヘッドがあるため、通常、単一の子を保持するためにコンテナを作成するべきではありません。