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.

html canvas

— Urmelinho
fonte

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.

— Omiod
fonte

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);

— J Sprague
fonte

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)";

— stecb
fonte

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;
}

— Marcel Bomfim
fonte

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.

— Chris
fonte

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.

— 1000Gbps
fonte