Este artículo comparte el principio de implementación, el código de implementación y los problemas encontrados en el proceso de implementación del lienzo que borra la animación para su referencia. El contenido específico es el siguiente
El principio es borrar una determinada imagen en un dispositivo móvil y mostrar otra imagen, utilizando lienzo para implementarla.
Si el usuario borra manualmente, debe escuchar Touchmove, Touchend y otros eventos, calcular las coordenadas correspondientes y usar el ClearRect o Rect de lienzo para dibujar arcos o líneas para lograr esto. Sin embargo, esto causará retraso en los teléfonos Androd.
Canvas tiene una propiedad GlobalCompositeOperation. El valor predeterminado de esta propiedad es la fuente, es decir, se superpondrá cuando se basa en los píxeles existentes. Sin embargo, hay otro atributo que es el destino, es decir, al mostrar su imagen de destino fuera de la imagen de origen, es decir, cuando se dibuja en función de los píxeles existentes, los píxeles existentes en el área que dibuje se establecerá transparente. Con este atributo, significa que no necesita usar una serie de funciones como el clip. Puede usar líneas gruesas o arcos. Esto reducirá las llamadas a la API del entorno de dibujo, mejorará el rendimiento y se ejecutará en Android mucho más suave.
Aquí está mi código de borrado :
Deje requestAnimationFrame = Window.RequestanimationFrame || Window.MozRequestanimationFrame || Window.WebkitRequestanimationFrame || Window.MsRequestanimationFrame; deja cancelanimationFrame = Window.CancelanimationFrame || Window.MozCanCelanimationFrame; Sea A = 60; Sea CanvasCleAner = Document.getElementById ('Cas-1'); Sea ctxCleaner = CanvasCleaner.getContext ('2d'); dejar canvascleanerbox = document.querySelector ('. Slide-4'); Let iMgCleaner = New Image (); CanvAscleCleCLEANT canvascleanerbox.clientWidth * 2; canvascleaner.height = canvascleanerbox.clientHeight * 2; canvascleaner.style.width = canvascleanerbox.clientwidth + 'px'; canvascleaner.Style.Height = canvasCeanerBox.ClientHeight + 'PXCLEY = 'https://gw.alicdn.com/tps/tb1xbyckvxxxxxxexpxxxxxxxxxxx-080-1920.jpg';imgcleaner.onload = () => {let width = parseint (canvascleaner.style.width); w = Canvascleaner.Width*(imgcleaner.height/imgcleaner.width); ctxcleaner.drawimage (imgcleaner, 0, 0, canvascleaner.width, w); ctxcleaner.linecap = 'redonde'; // La propiedad Linecap establece o devuelve el estilo de la tapa de línea al final de la línea. ctxCleaner.linejoin = 'Round'; ctxCleaner.lineWidth = 100; // establece o devuelve el ancho de la línea actual ctxcleaner.globalCompositEoperation = 'Destination-Out';} Let Drawline = (x1, y1, ctx) => {ctx.save (); ctx.beginpath (); ctx.arc (x1, y1, a, 0, 2 * math.pi); CTX.Fill (); // Método Fill () llena la imagen actual (ruta). El color predeterminado es negro. ctx.restore ();};/* d Para borrar las coordenadas del punto de área, los datos que obtuve al simular las formas que deben borrarse es similar a las siguientes: Let d2 = [[ [1,190], [30,180], [60,170], [90,168], [120,167], [150,165], [180,164], [210,163], [240,160], [270,159], [300,154], [330,153], [360,152] [390,150], [420,140], [450,130], [480,120], [510,120], [540,120], [570,120], [600,120], [630,120], [660,120],, [690,120], [720,120], [1,190], [20,189], [28,186], [45,185], [50,185], [62,184], [64,182], [90,180], [120,178],, [160,176], [200,174], [240,172];*/LET dibujo = (d, ctx) => {if (idx> = d.length) {cancelAnimationFrame (ts); } else {drawline (d [idx] [0], d [idx] [1], ctx); IDX ++; requestAnimationFrame (() => {dibujo (d, ctx);}); }}Debido a que muestro la animación de borrado directamente en la página y no requiere que el usuario la limpie ellos mismos, por lo que las coordenadas del área de borrado son calculadas por mí mismo. Luego use SoldYAnimationFrame para implementar la animación. Empecé a usar SetInterval. Descubrí que el SetInterval siempre estará en mal estado después, por lo que se recomienda no usar SetInterval.
En el proceso de lograr este efecto, descubrí que al usar lienzo para dibujar en la página, ¿la imagen se vuelve muy borrosa?
Resulta que se debe a que hay una propiedad DevicePixelRatio en la variable de ventana del navegador, que determina que el navegador usará varios (generalmente 2) puntos de píxeles para representar un píxel. Es decir, suponiendo que el valor de DevicePixelratio es 2, una imagen con un tamaño de 100*100 píxeles se representará con el ancho de 2 píxeles en la imagen. Por lo tanto, la imagen en realidad ocupará 200*200 píxeles en la pantalla Retina, que es equivalente a que la imagen se amplíe dos veces, por lo que la imagen se vuelve borrosa.
De esta manera, el problema sobre el lienzo se resolverá fácilmente. Podemos tratar el lienzo como una imagen. Cuando el navegador hace un lienzo, usará el ancho de 2 píxeles para representar el lienzo, por lo que la imagen o el texto dibujados se borrarán en la mayoría de los dispositivos de retina.
Del mismo modo, también hay una propiedad WebKitBackingStorePixelratio (solo Safari y Chrome) en el contexto de lienzo. El valor de esta propiedad determina que el navegador usará varios píxeles para almacenar información de lienzo antes de representar el lienzo. El valor en Safari bajo iOS6 es 2. Por lo tanto, si se dibuja una imagen de 100*100 en Safari, la imagen generará primero una imagen 200*200 en la memoria, y luego, cuando el navegador lo presenta, la generará como una imagen 100x100, por lo que se convierte en 200x200, que es exactamente lo mismo en la imagen en la memoria, por lo que no habrá problemas de distorsión en Safari en iOS. Sin embargo, hay distorsión en Safari en Chrome e iOS7. La razón es que los valores de WebKitBackingStorePixelratio de Safari en Chrome e iOS7 son 1.
Solución:
canvas.width = canvasbox.clientwidth * 2; canvas.height = canvasbox.clientheight * 2; canvas.style.width = canvas.clientwidth + 'px'; canvas.style.height = canvas.clientheight * 'px'; w = w = w = Canvas.width*(img.height/img.width); // console.log (w); ctx.DrawImage (img, 0, 0, Canvas.Width, W);
Es decir, puede crear un lienzo que sea el doble del tamaño real, y luego usar el estilo CSS para limitar el lienzo al tamaño real. O use este polyfill en GitHub, pero lo probé y no parece funcionar.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.