Javascript/jQuery: eliminar forma/ruta del lienzo

Parece que no puedo encontrar la función para eliminar una forma o ruta del lienzo después de que se ha creado.Javascript/jQuery: eliminar forma/ruta del lienzo

Así que estoy creando una curva de Bezier entre 2 puntos con

beginPath(); 
bezierCurveTo(); 
stroke(); 
closePath();

¿Cómo puedo quitar esto de la tela una vez que se ha creado? Necesito poder llamar a la función de eliminación a través de toggle() y blur(). Estoy seguro de que existe algo para esto ...

¡Gracias de antemano por cualquier ayuda!

Fuente

2010-04-03 bobsoap

Solo quería mencionar que el uso de 'closePath()' aquí y en muchas de las respuestas es incorrecto. Se usa para completar una ruta dibujando una línea al inicio de la ruta. Llamar después de 'stroke' does ** absolutamente nada. ** http://stackoverflow.com/questions/10807230/what-excaly-is-a-canvas-path-and-what-is-the-use-of- ctx-closepath –

Gracias por la gran entrada a todos ustedes - Me ayudó a encontrar la solución:

context.clearRect(x,y,w,h);

(link)

Este despejarán cualquier cosa dentro de ese rectángulo.

Encontré el método en la página que encontré mientras buscaba la respuesta de ILog para guardar/restaurar el contexto, y todo está allí. Gracias de nuevo.

Fuente

2010-04-03 19:18:46 bobsoap

Por lo que recuerdo de la especificación, debe llamar a context.save() antes de dibujar, luego dibujar algo, y luego llamar a context.restore() para volver al estado anterior.

Fuente

2010-04-03 17:25:53 ILog

Gracias por la sugerencia - Intenté esto (sin éxito) y luego encontré este recurso (http://www.whatwg.org/specs/web-apps/current-work/multipage/the- canvas-element.html # the-canvas-state) indicando: "La ruta actual y el mapa de bits actual no son parte del estado del dibujo. La ruta actual es persistente, y solo se puede restablecer utilizando el método beginPath(). El mapa de bits actual es propiedad del lienzo, no del contexto ". ¡Gracias de todos modos, muy apreciado! – bobsoap

Guardar/Restaurar solo funciona sobre ciertas propiedades del contexto, y llamarlas nunca tendrá un efecto visible en la imagen si no dibuja algo después. [Este artículo] (http://www.tutorialspoint.com/html5/canvas_states.htm) proporciona más información. –

No se puede eliminar una ruta/forma del lienzo. Puedes dibujar algo más sobre él o despejar el lienzo.

Fuente

2010-04-03 17:33:03 nxt

Puede intentar usar SVG en lugar de lienzo. Hay una fantástica biblioteca llamada Raphaël que hace que trabajar con SVG sea muy fácil. Funciona en todos los navegadores, incluido IE6.

Con SVG cada forma es su propio elemento que se puede mover, transformar o eliminar.

Fuente

2010-04-03 18:40:24 bcherry

Esto se ve fantástico, ya lo estoy buscando. ¡Gracias! – bobsoap

Un comentario retrospectivo aquí: si está dibujando mucho, SVG generalmente será menos eficiente que el lienzo. Actualmente estoy refacturando una aplicación que hace un montón de dibujo en SVG para usar canvas. –

Si está utilizando jQuery:

var elem = $("selector"); 
var canvas = elem.get(0); 
var context = canvas.getContext("2d"); 

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

reemplazar "selector" con su selector de jQuery real.

Fuente

2011-03-29 11:49:33

Para borrar el lienzo, utilice el siguiente código

canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height);

Siempre use beginPath método cuando se está empezando a trazar una nueva ruta y el método closePath después de terminar de dibujar su camino.

NOTA:Caminos que no están cerrados, no se puede borrar.

Si sus rutas no se están borrando, debe ser por la razón anterior.

Todo ruta debe comenzar con beginPath() y terminar con closePath()

Ejemplo:

 canvas_context.beginPath(); 
    canvas_context.moveTo(x1,y1); 
    canvas_context.lineTo(x2,y2); 
    canvas_context.stroke(); 
    canvas_context.closePath();

El siguiente código, también se borra el lienzo

canvas_1.width = canvas_1.width;

NOTA:La instrucción anterior reinicia un lienzo, por lo que borra un lienzo. Cualquier declaración que reinicialice un lienzo borrará un lienzo.

Fuente

2011-07-23 14:07:42

"Toda ruta DEBE comenzar con beginPath() y finalizar con closePath()" - ¡Incorrecto! ver http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of-ctx-closepath –

Acabo de probar eso de nuevo en mi Chrome y usted tienen razón. En 2011, cuando probé esto en Chrome, las rutas que no estaban cerradas nunca se borraron. De todos modos, gracias por la actualización. –

Esto es algo importante que debe tenerse en cuenta al <canvas>. Es una imagen aplanada compuesta de píxeles. Una vez que algo se ha dibujado, se fusiona en la cuadrícula de píxeles y no se puede diferenciar de los otros píxeles.

Si tiene que ser capaz de separar los elementos de imagen que podría:

superposición <canvas> elementos en una pila de capas
Uso <svg> en el que cada elemento visual es distinto de los otros elementos y puede ser manipulado independientemente

Puede pensar en <canvas> como una sola capa en PhotoShop/Gimp/Fireworks, o en un documento MSPaint.

Puede pensar en <svg> como documento en Illustrator/InkScape.

Fuente

2012-10-15 13:38:43

Prueba esto:

ctx.save(); 
ctx.globalCompositeOperation = "destination-out"; 
// drawing here you path second time 
ctx.restore();

"El atributo globalCompositeOperation establece cómo las formas y las imágenes se dibujan en el mapa de bits cero" specs

Cómo funciona se puede ver here.

Fuente

2012-12-04 00:24:30 agegorin

Javascript/jQuery: eliminar forma/ruta del lienzo

Respuesta

Cuestiones relacionadas