HTML5で透明なキャンバスを作成するにはどうすればよいですか？

キャンバスを透明にするにはどうすればよいですか？必要なのは、2つのキャンバスを重ねて配置するためです。

キャンバスはデフォルトで透明です。

ページの背景画像を設定して、その上にキャンバスを配置してみてください。キャンバスに何も描かれていない場合は、ページの背景を完全に見ることができます。

キャンバスをガラス板に絵を描くようなものと考えてください。

ちょうどあなたが私がやろうとしたことを正確にやろうとしていると思います：2つのスタックキャンバスが欲しい... アニメーションのため、すべての新しいフレームのレンダリングの開始時に、最上層の背景を透明にクリアする必要があります。ようやく答えが見つかりました。globalAlphaを使用しておらず、rgba（）カラーを使用していません。簡単で効果的な答えは次のとおりです。

context.clearRect(0,0,width,height);

特定のもの<canvas id="canvasID">を常に透明にしたい場合は、設定するだけです

#canvasID{
    opacity:0.5;
}

代わりに、キャンバス領域内の特定の要素を透明にしたい場合は、描画時に透明度を設定する必要があります。

context.fillStyle = "rgba(0, 0, 200, 0.5)";

キャンバスの背景を透明に設定するだけです。

#canvasID{
    background:transparent;
}

2つのキャンバスを3番目のキャンバスにペイントします。

私はこれと同じ問題を抱えていて、ここでの解決策のどれも私の問題を解決しませんでした。ある不透明なキャンバスとその上にある別の透明なキャンバスがありました。不透明なキャンバスは完全に見えませんでしたが、ページ本体の背景は見えていました。上部の透明なキャンバスからの描画は表示されましたが、下部の不透明なキャンバスは表示されませんでした。

最後の回答にコメントすることはできませんが、修正は比較的簡単です。不透明なキャンバスの背景色を設定するだけです。

#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas

よくわかりませんが、背景色はボディから透明として継承されているようです。