javascript - HTML5 Canvas - 2 つの Canvas オブジェクトを並べて配置

Question

Photoshop で画像を作成しているかのようにキャンバスを重ねることができることは知っていますが、キャンバス オブジェクトを上下に並べたり、並べたりすることはできますか?

スペースを選択できるグラフを描画しようとしています。選択した色に応じて、その選択に基づいてブロックが変更されます。

キャンバス #1 - 方眼紙を描く キャンバス #2 - キャンバス #1 の右側 - 4 つの色を選択できるタブ。これらの xy を計算して、カラー画像に基づいて色を取得します。キャンバス 1 のブロックの色は、この選択を反映します。

これは、この実装の良い方法ですか?

Answer 1

はい、キャンバスを上下左右に並べて配置できます。キャンバスは HTML 要素であり、CSS を使用して他の要素と同じように配置できます。

あなたが言及していない何らかの理由で絶対に必要でない限り、色の選択タブにキャンバスを使用しないようにするでしょう. 代わりに標準の DOM 要素を使用すると、キャンバス内のグラフィックスに対するマウスの位置を把握する必要なく、クリック イベントに直接バインドできます。

キャンバスを使用して UI コンポーネントを作成しない正当な理由がいくつかあります。