this.context.drawImage(myimage, 0, 0);
Poner la imagen en el lienzo está muy bien cubierto en toda la web. ¿Pero cómo lo elimino después de que esté allí?¿Cómo deshacer, ocultar, eliminar o eliminar una imagen de un lienzo html?
Opción 1:
Dibuje sobre ella un rectángulo del mismo color que el fondo.
Opción 2 (trabaja para el fondo no trivial, pero más lento):
Get the pixel data desde el lienzo antes de dibujar la imagen, a continuación, volver a dibujar que los datos de píxeles para eliminar la imagen.
Me he ido con una rutina de "redibujado" que borra y vuelve a dibujar todo el lienzo cuando es necesario, ya que no está animado o tiene mucha hambre de recursos. –
El lienzo es una superficie de dibujo inmediata. Esto significa que ejecutas un comando (drawImage o fillRect) y hace ese comando, y no importa lo que acabas de hacer. No hay deshacer de algo.
Ha tenido dificultades para buscarlo porque no existe la "eliminación" de un lienzo. Todo lo que sabe es que tiene algunos píxeles de algún color de en alguna parte. No tiene idea de dónde.
Para simplificar un poco, por lo general hay dos maneras:
Se dará cuenta de 1. que probablemente tendrá que empezar a hacer el seguimiento de las cosas que se dibujan sobre lienzo si desea que algunos de ellos eliminar de manera selectiva o vuelven a colocar. Inculcar persistencia de objetos, o más bien convertir el lienzo de una superficie de dibujo inmediata a una superficie de dibujo retenida, es algo que hacen muchas bibliotecas de lienzos. Si quiere hacerlo usted mismo, he escrito algunos tutorails para ayudar a las personas a comenzar.
Si desea consultar las bibliotecas, eche un vistazo al easel.js. Es bastante aprendible.
Así que se me ocurrió una manera rápida y fácil de limpiar mi lienzo. Acabo de poner mis etiquetas <canvas> entre <p> etiquetas con un Id, luego, cada vez que necesitaba mi lienzo borrado, simplemente reinscribí mis etiquetas <p> cambiando el innerHTML, funciona como un amuleto.
El lienzo HTML5 tiene un nombre apropiado, ya que se comporta casi como un lienzo real, puede pintar (renderizar) cosas allí pero no puede eliminarlo. Puedes pintar sobre ella con otra imagen, puedes borrar los píxeles que la renderizaron, o puedes borrar el lienzo por completo. Esta respuesta stackoverflow muestra cómo borrar solo los píxeles que ocupa la imagen http://stackoverflow.com/questions/3458244/removing-an-image-from-a-canvas-in-html5 – kreek
Thx. Ahora, ¿por qué esa pregunta no apareció pronto en los resultados de búsqueda para "[html5] [canvas] remove"? Lo encuentra si agrega "eliminar" a la consulta de búsqueda, pero necesita saber cuál es el asunto para encontrar la manera de encontrarlo. –