Come si crea una tela trasparente in html5?

Question

Come posso rendere trasparente una tela? Ho bisogno di perché voglio mettere due tele uno sopra l'altro.

Answer 1

Le tele sono trasparenti per impostazione predefinita.

Provare a impostare un'immagine di sfondo della pagina, quindi posizionare una tela su di essa. Se non viene disegnato nulla sulla tela, è possibile vedere completamente lo sfondo della pagina.

Pensa a una tela come a un dipinto su una lastra di vetro.

Answer 2

Iif si desidera un particolare <canvas id="canvasID"> per essere sempre trasparenti devi solo impostare

#canvasID{ 
    opacity:0.5; 
} 

Invece, se si desidera che alcuni elementi particolari all'interno dell'area tela per essere trasparenti, è necessario impostare la trasparenza quando si disegna , ovvero

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

Answer 3

Dipingi le tue due tele su una terza tela.

Ho avuto questo stesso problema e nessuna delle soluzioni qui risolto il mio problema. Avevo una tela opaca con sopra un'altra tela trasparente. La tela opaca era completamente invisibile ma lo sfondo del corpo della pagina era visibile. I disegni dalla tela trasparente sulla parte superiore erano visibili mentre la tela opaca sotto non era.

Answer 4

Impossibile commentare l'ultima risposta ma la correzione è relativamente semplice. Basta impostare il colore di sfondo della tua tela opaca:

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

Non sono sicuro ma sembra che il background-color viene ereditata come trasparente dal corpo.

Answer 5

Basta impostare lo sfondo della tela su trasparente.

#canvasID{ 
    background:transparent; 
} 

Answer 6

Credo che si sta cercando di fare esattamente quello che ho appena provato a fare: Voglio due tele accatastate ... quello inferiore ha un'immagine statica e quella superiore contiene sprite animati. A causa dell'animazione, è necessario cancellare lo sfondo del livello superiore a trasparente all'inizio del rendering di ogni nuovo fotogramma. Alla fine ho trovato la risposta: non usa globalAlpha e non usa un colore rgba(). La risposta semplice ed efficace è:

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