Ejemplos de código para implementar animación normal y animación de partículas en lienzo

Canvas se utiliza para dibujar imágenes y animaciones en páginas web. Puede entenderse como un lienzo y el efecto deseado se construye sobre este lienzo.

Canvas puede dibujar efectos dinámicos además de las animaciones regulares de uso común, el concepto de partículas también se puede utilizar para lograr efectos dinámicos más complejos. Este artículo utiliza efectos dinámicos ordinarios y efectos especiales de partículas para implementar un reloj simple.

La animación ordinaria utiliza la API de lienzo para lograr patrones y animaciones regulares.

Efecto

El efecto es relativamente simple de lograr. Analizamos principalmente la implementación del desplazamiento del ángulo entre la escala y el puntero.

Este ejemplo es el dibujo de la escala de horas: hay 12 horas en el dial, Math.PI es 180° y cada hora ocupa 30°.

.save() significa guardar el estado del entorno actual del lienzo y dibujar sobre esta base. Una vez completado el dibujo, se devuelven el estado y los atributos de la ruta previamente guardados.

Lo mismo ocurre con la escala de minutos, sólo cambia el ángulo y el estilo.

 // Escala de tiempo por hora offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // Escala de color offscreenCanvasCtx.strokeStyle = '#fff'; lineWidth = 3; // Ocupa 30° cada hora offscreenCanvasCtx.rotate(Math.PI / 6); // La posición inicial del dibujo offscreenCanvasCtx.lineTo(140, 0) // La posición final del dibujo; offscreenCanvasCtx.lineTo(120, 0); // La ruta del dibujo offscreenCanvasCtx.stroke(); restaurar() ;

Tome el segundero como ejemplo: obtenga los segundos de la hora actual y calcule el ángulo de compensación correspondiente

 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr > 12 hr - 12 : hr; guardar (); offscreenCanvasCtx.rotate(seg * (Math.PI / 30) ......); offscreenCanvasCtx.stroke();

Canvas se puede utilizar para dibujar animaciones complejas e irregulares. Los efectos de partículas se pueden utilizar para lograr efectos dinámicos aleatorios y complejos.

Las partículas se refieren a cada píxel en los datos de la imagen imageData . Después de obtener cada píxel, agregue atributos o eventos para interactuar con las partículas en el área para lograr efectos dinámicos.

Efecto

Tome la conversión de imagen en la figura siguiente como ejemplo. El efecto es renderizar primero la imagen en el lienzo y luego obtener cada píxel en el área donde se encuentra el texto.

 let image = new Image(); image.src='../image/logo.png'; let pixels=[] //Almacenamiento de datos de píxeles let imageData; Renderice la imagen y obtenga la información de píxeles en el área image.onload=function(){ ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height imageData=ctx.getImageData((canvas.width-); imagen.ancho)/2,(lienzo.alto-imagen.alto)/2,imagen.ancho,imagen.alto); //Obtener información de píxeles del gráfico //Dibujar imagen};

El tamaño de la imagen es 300 * 300, con un total de 90.000 píxeles. Cada píxel ocupa 4 bits y almacena datos rgba.

 function getPixels(){ var pos=0; var data=imageData.data; //Datos de matriz unidimensional RGBA //La altura y el ancho de la imagen de origen son 300px for(var i=1;i<=image.width ;i++ ){ for(var j=1;j<=image.height;j++){ pos=[(i-1)*image.width+(j-1)]*4; //Obtener la posición del píxel if(data[pos]>=0){ var pixel={ x:(canvas.width-image.width)/2+j+Math.random()*20, //Restablecer cada píxel información de posición y: (canvas.height-image.height)/2+i+Math.random()*20, //Restablece la información de posición de cada píxel fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(datos[pos+3])+')' } píxeles.push(pixel); } } } } función drawPixels() { var lienzo = document.getElementById(myCanvas) var ctx; canvas.getContext(2d); ctx.clearRect(0,0,canvas.width,canvas.height); var len = pixels.length, curr_pixel = null; para (var i = 0; i < len; i++) { curr_pixel = píxeles[i]; ctx.fillStyle = curr_pixel.fillStyle; ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);

Representar reloj de texto

 tiempo de función () { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150px negrita; ctx.fillText; (nuevo Fecha().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight }

Efecto

El concepto de partículas de conversión de texto es el mismo que el anterior. Los píxeles en el área seleccionada se obtienen, se seleccionan de acuerdo con las condiciones del filtro y se almacenan en la matriz. Redibujar después del recorrido.

 función getPixels(){ let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); let data = imgData.data pixelsArr = [] for(let) i=1;i<=textHeight;i++){ para(let j=1;j<=textWidth;j++){ pos=[(i-1)*textWidth+(j-1)]*4; //Obtener la posición del píxel if(data[pos]>=0){ var pixel={ x:j+Math.random()* 20, //Restablece la información de posición de cada píxel y:i+Math.random()*20, //Restablece la información de posición de cada píxel fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(datos[pos+3])+')' }; píxelesArr.push(píxel);

imgData guarda la información de píxeles en el área seleccionada, cada píxel ocupa 4 bits y guarda la información RGBA de cuatro bits. Al filtrar el cuarto bit de cada píxel, este código guarda todos los píxeles con una transparencia que no es 0 en la matriz pixelsArr .

x registran la información de posición de la partícula. Para producir el efecto de movimiento en la representación, se agrega y posición de desplazamiento de 0 a 20 píxeles a cada partícula. Cada vez que se vuelve a dibujar, la posición de desplazamiento se genera aleatoriamente. movimiento.

Después de obtener las partículas, debe borrar el texto original en el lienzo y volver a dibujar las partículas obtenidas en el lienzo.

 function drawPixels() { // Borra el contenido del lienzo y vuelve a dibujar ctx.clearRect(0,0,canvas.width,canvas.height); for (let i in pixelsArr) { ctx.fillStyle = pixelsArr[i].fillStyle; r = Math.random()*4 ctx.fillRect(píxelesArr[i].x, píxelesArr[i].y, r, r); } }

El estilo de redibujado de partículas es el color y la transparencia originales al filtrar píxeles, y cuando cada partícula se dibuja en el lienzo, se define el parámetro de tamaño r y el valor de r es un número aleatorio de 0 a 4. Las partículas resultantes tienen un tamaño aleatorio.

Después de obtener las partículas y volver a dibujarlas correctamente, es necesario actualizar la página en tiempo real. Aquí se utiliza el método window.requestAnimationFrame(callback) .

 function time() { ...... getpixels(); //Obtener partículas drawPixels() // Redibujar partículas requestAnimationFrame(time );

El método window.requestAnimationFrame(callback) le dice al navegador que desea realizar una animación y le solicita que llame a la función especificada para actualizar la animación antes del próximo rediseño. Este método toma una función de devolución de llamada como parámetro, que se llamará antes de que el navegador vuelva a dibujar.

Este método no requiere establecer un intervalo de tiempo y la frecuencia de llamadas adopta el intervalo de tiempo del sistema (1 s).

Explicación del documento haga clic aquí

Efecto

Este artículo logra principalmente el efecto dinámico del reloj de dos maneras diferentes, entre las cuales el reloj de partículas tiene más operatividad. En futuras series de lienzos se implementarán más efectos dinámicos para el sistema de partículas.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.