Exemple d'implémentation d'un arrière-plan d'animation de particules de canevas

Sans effet de connexion :

L'effet de la connexion :

Obtenir un tel effet est en fait très simple et peut être grossièrement divisé en les étapes suivantes :

Tout d'abord, vous devez créer une balise canvas dans l'élément parent qui doit afficher l'arrière-plan des particules et spécifier width et height . Lorsque nous générons des coordonnées de points aléatoires, nous devons utiliser width et height comme référence. width et height sont égales à la largeur et à la hauteur de l'élément parent.

 // Si l'élément parent est bodyconst ele = document.body;const canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// Insérer la balise canvas dans ele .appendChild (toile);

Générez aléatoirement une certaine quantité d'informations de coordonnées de point avec width et height comme référence, notamment x , y , rateX (la vitesse de déplacement du point sur l'axe X), rateY (la vitesse de déplacement du point sur l'axe Y) , rateX et rateY déterminent le mouvement de la trajectoire du point.

 const points = [];// Génère aléatoirement les coordonnées des points, vous devez spécifier la valeur maximale du rayon function getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // La coordonnée x de la particule y = Math.ceil(Math.random() * this.height), // La coordonnée y de la particule r = +(Math.random() * this.radius).toFixed(4) , // Le rayon des particules rateX = +(Math.random() * 2 - 1).toFixed(4), // Le taux de mouvement des particules dans la direction x rateY = +(Math.random() * 2 - 1) .toFixed(4) ); // Le taux de mouvement des particules dans la direction y return { x, y, r, rateX, rateY };}// Génère aléatoirement les informations de coordonnées de 100 points pour (soit i = 0; je < 100 ; i++) { points.push(this.getPoint());}

Dessinez le tableau de points généré sur le canevas

 function drawPoints() { points.forEach((item, i) => { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI*2, false); ctx.fillStyle = '#fff'; ctx.fill(); //Déplacer les coordonnées du point en fonction de rateX et rateY if(item.x > 0 && item.x < width && item.y > 0 && item.y < height) { item.x += item.rateX * rate; item.y += item.rateY * rate } else { // Si le mouvement des particules dépasse la limite, déplacez le particule Supprimer et régénérer un nouveau point. points.splice(i, 1); points.push(getPoint(radius));

Parcourez le tableau de points et comparez les coordonnées des points. Si la distance entre les deux points est inférieure à une certaine valeur, tracez une ligne droite entre les deux points. lineWidth change avec la distance entre les deux points. , plus la ligne est fine.

 // Calculer la distance entre deux points 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; //Jugez les coordonnées du centre par paires pour(let i = 0; i < len; i++) { for(let j = len - 1; j >= 0; j--) { const x1 = points[i].x, y1 = points[i].y, x2 = points[j]. x, y2 = points[j].y, disPoint = dis(x1, y1, x2, y2); // Si la distance entre deux points est inférieure à 150, tracez une ligne if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.strokeStyle = '#fff'; //Plus la distance entre deux points est grande, plus la ligne est fine et vice-versa. versa ctx.lineWidth = 1 - disPoint / distance; ctx.stroke();

Utilisez requestAnimationFrame pour appeler la méthode draw dans une boucle (la méthode draw inclut le dessin de points et de lignes), et en même temps modifiez la position du point en fonction de rateX et rateY pendant draw .

 // Appelez la fonction draw pour démarrer l'animation (function draw() { ctx.clearRect(0, 0, width, height); drawPoints(); // Si vous n'avez pas besoin de tracer des lignes, annulez simplement la ligne suivante de code.drawLines(); window.requestAnimationFrame(draw);}());

Pour le code complet, veuillez consulter : https://github.com/PengJiyuan/particle-bg

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

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.