¿Cómo hago un lienzo transparente en html5?

123

¿Cómo puedo hacer transparente un lienzo? Lo necesito porque quiero poner dos lienzos uno encima del otro.

html canvas

— Urmelinho
fuente

194

Los lienzos son transparentes por defecto.

Intente configurar una imagen de fondo de página y luego coloque un lienzo sobre ella. Si no se dibuja nada en el lienzo, puede ver completamente el fondo de la página.

Piense en un lienzo como pintar sobre un plato de vidrio.

— Omiod
fuente

6

El lienzo tiene un fondo negro en el móvil, por lo que las capas de lienzos no funcionan allí. (Al menos en Chrome para Android)

— nicholeous

11

Tanto para los estándares, como de costumbre.

— Triynko

6

Creo que estas respuestas están perdiendo el sentido. De manera similar a la pregunta anterior, quiero tener dos lienzos en capas: el de abajo tiene una imagen estática, pero el de arriba tendrá sprites animados. Esta capa superior debe tener un fondo transparente, pero también debe "limpiarse" y volver a dibujarse con cada cuadro de animación. Sí, comienza transparente de forma predeterminada, pero ¿cómo se restablece a transparente y al inicio de cada nuevo cuadro de animación?

— J Sprague

3

Así es como se limpia un lienzo en cualquier momento: stackoverflow.com/questions/2142535/…

— Omiod

Ya que obtuviste tantos votos a favor, ¿puedes al menos responder la pregunta también? ¿Cómo se hace transparente un lienzo no transparente?

— DDD

48

Creo que estás intentando hacer exactamente lo que acabo de intentar hacer: quiero dos lienzos apilados ... el inferior tiene una imagen estática y el superior contiene sprites animados. Debido a la animación, debe borrar el fondo de la capa superior para que sea transparente al comienzo de la renderización de cada nuevo cuadro. Finalmente encontré la respuesta: no está usando globalAlpha, y no está usando un color rgba (). La respuesta simple y efectiva es:

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

— J Sprague
fuente

45

Si quieres que un particular <canvas id="canvasID">sea siempre transparente, solo tienes que configurar

#canvasID{
    opacity:0.5;
}

En cambio, si desea que algunos elementos particulares dentro del área del lienzo sean transparentes, debe establecer la transparencia al dibujar, es decir

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

— stecb
fuente

Ah, estaba buscando transparencia fillStyle. ¡Gracias!

— Workman

3

FYI: los opacitycambios no tendrán efecto si hay un relleno de fondo en el lienzo.

— Adam Eberlin

3

Simplemente configure el fondo del lienzo en transparente.

#canvasID{
    background:transparent;
}

— Marcel Bomfim
fuente

1

Esta respuesta no funciona en todas las situaciones, context.clearRect (0, 0, width, height) es la solución que funcionó para mí

— Dmitriy

2

Pinta tus dos lienzos en un tercer lienzo.

Tuve este mismo problema y ninguna de las soluciones aquí resolvió mi problema. Tenía un lienzo opaco con otro lienzo transparente encima. El lienzo opaco era completamente invisible pero el fondo del cuerpo de la página era visible. Los dibujos del lienzo transparente en la parte superior eran visibles, mientras que el lienzo opaco debajo no lo era.

— Chris
fuente

0

No puedo comentar la última respuesta, pero la solución es relativamente fácil. Simplemente configure el color de fondo de su lienzo opaco:

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

No estoy seguro, pero parece que el color de fondo se hereda como transparente del cuerpo.

— 1000 Gbps
fuente