1. ホーム
  2. html

[解決済み】html5 - canvas要素 - 複数のレイヤー

2022-04-13 01:28:39

質問

拡張ライブラリを使用せずに、同じcanvas要素に複数のレイヤーを設定することは可能でしょうか?

つまり、一番上のレイヤーでclearRectを実行しても、下のレイヤーは消えないということですね?

ありがとうございます。

解決方法は?

いいえ、しかし、複数の <canvas> 要素を重ねることで、似たようなことを実現できます。

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

に最初のレイヤーを描きます。 layer1 キャンバスに、2つ目のレイヤーは layer2 キャンバスを使用します。 そして clearRect を上のレイヤーに配置すると、下のキャンバスにあるものはすべて透けて見えます。