[解決済み】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
を上のレイヤーに配置すると、下のキャンバスにあるものはすべて透けて見えます。
関連
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] 再描画のためにキャンバスをクリアする方法
-
[解決済み] HTML5/Canvas/JavaScriptを使用してブラウザ内のスクリーンショットを撮影する
-
[解決済み] HTML5 CanvasとSVGとdivの比較
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
-
[解決済み】HTML5キャンバスの画像サイズを変更する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTML5 Canvas の z-index を設定する
-
ローカルリソースのロードが許可されていない問題を解決する
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み] HTML5でminlengthの検証属性はありますか?
-
[解決済み] div内の画像の下に余分なスペースがある