web-dev-qa-db-ja.com

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

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

html5canvas
112
Urmelinho

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

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

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

175
Omiod

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

#canvasID{
    opacity:0.5;
}

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

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

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

context.clearRect(0,0,width,height);
37
J Sprague

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

#canvasID{
    background:transparent;
}
4
Marcel Bomfim

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

同じ問題があり、ここの解決策はどれも私の問題を解決しませんでした。1つの不透明なキャンバスの上に別の透明なキャンバスがありました。不透明なキャンバスは完全に見えませんが、ページ本文の背景が見えました。上の透明なキャンバスは見えましたが、下の不透明なキャンバスは見えませんでした。

2
Chris
    var canvasBgColor = "#fff";
    this.canvas.fillStyle=canvasBgColor;
    this.canvas.fillRect(0, 0,this.canvas.width,this.canvas.height);

最初にキャンバスの背景色として白い長方形を描くことができます。

0
Jackdon Wang

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

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

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

0
1000Gbps