HTML5 - Cambiar la opacidad de un sorteo rectángulo

Digamos que dibujo un elemento HTML5 de rectángulo con esto:HTML5 - Cambiar la opacidad de un sorteo rectángulo

context.clearRect(25, 72, 32, 32);

¿Cómo puedo hacer que el 50% transparente?

Fuente

2012-05-07 nn2

Utilice globalAlpha. También deberás dibujar con fillRect. clearRect solo borra píxeles. No puede borrarse parcialmente, por lo que deberá usar fillRect u otras primitivas de dibujo.

de w3schools.com:

ctx.globalAlpha = 0.2; 
    ctx.fillRect(50,50,75,50); 
    ctx.globalAlpha = 1.0;

Fuente

2012-05-07 19:43:34

Esto hace que todo el lienzo transparente (al menos en Chrome) –

Brian, que no se borra todo el lienzo, sólo el tamaño y la ubicación que le dan . Eso es lo que son esos 4 números; las dos primeras son la coordenada X en el lienzo, luego la coord. Y, y luego el tamaño X e Y del rect que desea borrar. (Tenga en cuenta que los valores Y en su lugar se hacen más grandes a medida que descienden, en el lienzo) –

Tenga en cuenta que tendrá que llamar 'ctx.globalAlpha = 1;' después de esas dos líneas para evitar nuevas llamadas al sorteo (incluso unos, créalo o no) de ser parcialmente transparente también. –

clearRect elimina lo que estaba allí y lo deja en blanco. La mejor manera es usar un valor rgba fillStyle ya que solo hará que el rectángulo (o cualquier otra forma que esté dibujando) sea transparente. El código sería:

ctx.fillStyle = 'rgba(225,225,225,0.5)'; 
ctx.fillRect(25,72,32,32);

(gracias How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?)

Fuente

2013-07-03 22:36:12

Prefiero esto sobre la respuesta seleccionada ya que no afecta globalmente a todo el dibujo después de usarlo. –

Puede guardar y restaurar el contexto para que no surta efecto global utilizando 'ctx.save()' y 'ctx.restore()' enmarcado en sus otros cambios de contexto. –

Prefiero esto sobre el más popular porque es más concreto: habla sobre la transparencia del relleno (quiero "limpiar" un rectángulo), no la transparencia de ninguna operación. Las dos soluciones requieren 4 líneas (porque ctx.save() y ctx.restore() preservan el contexto). De todos modos, las dos soluciones son buenas para mí. – ddcovery

HTML5 - Cambiar la opacidad de un sorteo rectángulo

Respuesta

Cuestiones relacionadas