"Borrado" en el lienzo html5

Tengo una aplicación de garabateo en el lienzo html5, y estoy tratando de encontrar la mejor manera de implementar un control de borrador. El primer impulso fue simplemente hacer que el borrador dibujara el color de fondo [blanco], pero esto es problemático porque si el usuario mueve una imagen u otra capa a donde se han borrado previamente, ve el dibujo blanco donde borraron."Borrado" en el lienzo html5

Idealmente, me gustaría que el control de borrado cambie los píxeles a negro transparente. No puedo simplemente usar lineTo para hacer esto porque, obviamente, dibuja una línea negra transparente sobre él, y eso deja intacto el doodle original. ¿Alguna idea sobre cómo hacer esto?

Gracias.

Fuente

2010-07-25 Matthew

http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp – zloctb

¿Qué significa "negro transparente"? Si es completamente transparente, no importa de qué color sea, ¿verdad? –

Shh, no orines a los adoradores del Unicornio Rosa Invisible;) – BarbaraKwarc

Si desea dibujar un trazo negro transparente, es probable que quieren:

context.globalCompositeOperation = "destination-out"; 
context.strokeStyle = "rgba(0,0,0,1)";

Recuerde guardar el globalCompositeOperation anterior y luego restaurarla más tarde o la transparencia no funcionará correctamente!

Fuente

2010-07-26 11:01:41 andrewmu

gracias! ¡eso hizo el truco! : D – Matthew

nota: como implica @Tim, es posible que necesite tener un estilo de 'rgba (0,0,0,1.0)' para trabajar en las implementaciones Canvas 2D actuales. – andrewmu

Mire en clearRect si su borrador es un rectángulo. La función clearRect, según la especificación, hará que los píxeles en el rectángulo sean transparentes en negro, como desee.

Si desea tener otras formas de borrador [es decir, ¿círculo?], Debe manipular los datos de píxeles. Tenga en cuenta que si desea un borrador similar al de una pluma, esto se vuelve infernal.

referencia más útil en el mundo: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Fuente

2010-07-25 11:01:36 Warty

Tenga en cuenta que Firefox 3.6/4.0 implementa 'copiar' borrando primero todo el fondo. Los documentos w3c no son claros en cuanto a lo que debería suceder aquí. Chrome (¿webkit?) Interpreta las especificaciones como "solo donde se dibujan los píxeles", por ejemplo, el resultado de un trazo().

destino-out con "rgba (255,255,255,1.0)", establece el fondo transparente donde los píxeles en el framebuffer no son transparentes. dejando fondo transparente tanto en cromo como en firefox.

copie la siguiente página localmente, y juegue con varios colores/opacidades para el cuadro azul y el círculo rojo, ¡y no olvide hacer que el color de fondo de la página no sea blanco! y

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Encontrará navegadores son muy diferentes.

Fuente

2011-05-22 05:16:45 Tim

"Borrado" en el lienzo html5

Respuesta

Cuestiones relacionadas