Come creo una tela trasparente in html5?


123

Come posso rendere trasparente una tela? Ne ho bisogno perché voglio mettere due tele una sopra l'altra.

Risposte:


194

Le tele sono trasparenti per impostazione predefinita.

Prova a impostare un'immagine di sfondo della pagina e poi mettici sopra una tela. Se non viene disegnato nulla sulla tela, puoi vedere completamente lo sfondo della pagina.

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


6
La tela ha uno sfondo nero sui dispositivi mobili, quindi la stratificazione delle tele non funziona lì. (Almeno su Chrome per Android)
nicholeous

11
Questo per quanto riguarda gli standard, come al solito.
Triynko

6
Penso che queste risposte manchino il punto. Simile alla domanda sopra, voglio avere due tele a strati: quella inferiore ha un'immagine statica, ma quella superiore avrà sprite animati. Questo livello superiore deve avere uno sfondo trasparente, ma deve anche essere "cancellato" e ridisegnato con ogni fotogramma dell'animazione. Sì, inizia trasparente per impostazione predefinita, ma come si ripristina su trasparente e l'inizio di ogni nuovo fotogramma di animazione?
J Sprague

3
Questo è il modo per cancellare un qualsiasi momento tela: stackoverflow.com/questions/2142535/...
Omiod

Dato che hai ricevuto così tanti voti positivi Puoi almeno rispondere anche alla domanda? Come si rende trasparente una tela non trasparente?
GGD

48

Credo che tu stia cercando di fare esattamente quello che ho appena provato a fare: voglio due tele impilate ... quella in basso ha un'immagine statica e quella in alto contiene sprite animati. A causa dell'animazione, è necessario rendere trasparente lo sfondo del livello superiore all'inizio del rendering di ogni nuovo fotogramma. Finalmente ho trovato la risposta: non sta usando globalAlpha e non sta usando un colore rgba (). La risposta semplice ed efficace è:

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

45

Se vuoi che un particolare <canvas id="canvasID">sia sempre trasparente devi solo impostarlo

#canvasID{
    opacity:0.5;
}

Invece, se vuoi che alcuni elementi particolari all'interno dell'area della tela siano trasparenti, devi impostare la trasparenza quando disegni, es

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

Ah, stavo cercando la trasparenza fillStyle. Grazie!
Workman

3
FYI: le opacitymodifiche non avranno effetto se c'è un riempimento di sfondo nell'area di disegno.
Adam Eberlin,

3

Basta impostare lo sfondo della tela su trasparente.

#canvasID{
    background:transparent;
}

1
Questa risposta non funziona in tutte le situazioni, context.clearRect (0, 0, larghezza, altezza) è la soluzione che ha funzionato per me
Dmitriy

2

Dipingi le tue due tele su una terza tela.

Ho avuto lo stesso problema e nessuna delle soluzioni qui ha risolto il mio problema. Avevo una tela opaca con un'altra tela trasparente sopra di essa. La tela opaca era completamente invisibile ma lo sfondo del corpo della pagina era visibile. I disegni della tela trasparente in alto erano visibili mentre la tela opaca sottostante non lo era.


0

Non posso commentare l'ultima risposta ma la soluzione è relativamente facile. Basta impostare il colore di sfondo della tua tela opaca:

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

Non ne sono sicuro, ma sembra che il colore di sfondo sia ereditato come trasparente dal corpo.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.