Ejemplo de implementación de fondo de animación de partículas de lienzo

Sin efecto de conexión:

El efecto de conectar:

Lograr tal efecto es realmente muy simple y se puede dividir aproximadamente en los siguientes pasos:

Primero, debe crear una etiqueta canvas en el elemento principal que debe mostrar el fondo de la partícula y especificar width y height . Cuando generamos coordenadas de puntos aleatorios, debemos usar width y height como referencia. width y height son iguales al ancho y alto del elemento padre.

 // Si el elemento principal es bodyconst ele = document.body;const canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// Inserta la etiqueta del lienzo en ele .appendChild (lienzo);

Genere aleatoriamente una cierta cantidad de información de coordenadas de puntos con width y height como referencia, incluidos x , y , rateX (la velocidad de movimiento del punto en el eje X), rateY (la velocidad de movimiento del punto en el eje Y) , rateX y rateY determinan el movimiento de la trayectoria del punto.

 const points = [];// Genere aleatoriamente las coordenadas de los puntos, debe especificar el valor máximo del radio function getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // La coordenada x de la partícula y = Math.ceil(Math.random() * this.height), // La coordenada y de la partícula r = +(Math.random() * this.radius).toFixed(4) , // El radio de la velocidad de partículasX = +(Math.random() * 2 - 1).toFixed(4), // La velocidad de movimiento de las partículas en la dirección x rateY = +(Math.random() * 2 - 1) .toFixed(4) ); // La tasa de movimiento de partículas en la dirección y return { x, y, r, rateX, rateY };}// Genera aleatoriamente la información de coordenadas de 100 puntos para (let i = 0; yo < 100; i++) { puntos.push(this.getPoint());}

Dibuja la matriz de puntos generada en el lienzo.

 función drawPoints() { puntos.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; ctx.fill(); //Mover las coordenadas del punto según rateX y rateY if(item.x > 0 && item.x < width && item.y > 0 && item.y < altura) { item.x += item.rateX * rate; item.y += item.rateY * rate } else { // Si el movimiento de la partícula excede el límite, mueva el partícula Eliminar y regenerar un nuevo punto. puntos.splice(i, 1); puntos.push(getPoint(radius));

Recorra la matriz de puntos y compare las coordenadas de los puntos. Si la distancia entre los dos puntos es menor que un cierto valor, dibuje una línea recta entre los dos puntos. lineWidth cambia con la distancia entre los dos puntos. , más delgada es la línea.

 // Calcula la distancia entre dos puntos function dis(x1, y1, x2, y2) { var disX = Math.abs(x1 - x2), disY = Math.abs(y1 - y2 return Math.sqrt(disX *); disX + disY * disY);}function drawLines() { const len ​​​​= points.length //Juzga las coordenadas centrales en pares for(let i = 0; i <; len; i++) { for(let j = len - 1; j >= 0; j--) { const x1 = puntos[i].x, y1 = puntos[i].y, x2 = puntos[j]. x, y2 = puntos[j].y, disPoint = dis(x1, y1, x2, y2 // Si la distancia entre dos puntos es menor que 150, dibuja una línea if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#fff'; versa ctx.lineWidth = 1 - disPoint / distancia; ctx.stroke();

Utilice requestAnimationFrame para llamar al método draw en un bucle (el método de dibujo incluye puntos y líneas de dibujo) y, al mismo tiempo, cambie la posición del punto de acuerdo con rateX y rateY durante draw .

 // Llama a la función de dibujo para iniciar la animación (función draw() { ctx.clearRect(0, 0, ancho, alto); drawPoints(); // Si no necesitas dibujar líneas, simplemente cancela la siguiente línea de código. drawLines(); ventana.requestAnimationFrame(dibujo);}());

Para obtener el código completo, consulte: https://github.com/PengJiyuan/particle-bg

Mi Github: https://github.com/PengJiyuan

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.