HTML5 Canvasでレイヤーを作成する最も良い方法は？

Question

HTML5キャンバス上の別のレイヤーで作業する必要がある場合は、それを行う最善の方法は何ですか？私はいくつかの人々がposition：absoluteを使って複数のキャンバスを互いに積み重ねることを決めたのを見る。これが最善の方法ですか？

Answer 1

個人的には、私はキャンバスを上に積み重ねません。キャンバスは実際には必要なすべてのピクセルを表示するビットマップなので、ほとんどの場合、必要なのは1つのみです。

ライブラリを使用してさまざまなオブジェクトを管理することをお勧めします。私は、グラントスキナーのEaselJSがうまく動作することを発見しました。

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

EaselJSのドキュメントと例もあります。

EDIT：

ここでは、グループオブジェクトに使用containerに関するドキュメントからの抽出物です。

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