all - html5 element index

"Borrado" en lienzo html5

Question

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.

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.

Answer 1

Mira en clearRect si tu 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.

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

Answer 2

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

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

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

Answer 3

Tenga en cuenta que Firefox 3.6 / 4.0 implementa ''copia'' al borrar todo el fondo primero. 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 ().

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

copia la siguiente página localmente y juega con varios colores / opacidades para el cuadro azul y el círculo rojo, ¡y no olvides 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

Descubrirá que los navegadores son muy diferentes.