html - 複数の HTML5 キャンバスのオーバーレイ

Question

イベント伝播を使用して透明な HTML5 キャンバスのスタックを作成することは可能ですか?

たとえば、クリック ハンドラーが添付された画像が描画された背景キャンバスがあります。その後、まったく同じサイズの背景キャンバスの上に別のキャンバスを追加したいと思います。また、透明なゾーンもあります。問題は、一番上のレイヤーをクリックすると、バックグラウンド キャンバスのクリック ハンドラーが起動するかどうかです。

Answer 1

最上位レイヤーをクリックすると、背景キャンバスのクリック ハンドラーが起動しますか?

いいえ、それはしません。キャンバスは、その背後にあるものからのイベントをブロックします。

通常、2 つのオプションがあります。各キャンバスにイベントを配置し、最初のキャンバスで何も起こらない場合はそれらを「通過」させるシステムを作成するか、最上位のキャンバスにのみイベントを配置し、それらの 1 つのイベントを使用してすべてのキャンバスに関する操作を実行します。

2番目のアプローチをお勧めします。最上位のキャンバスのみにすべてのイベントを保持します。