Implementierungsbeispiel für den Hintergrund einer Canvas-Partikelanimation

Ohne Verbindungseffekt:

Der Effekt der Verbindung:

Einen solchen Effekt zu erzielen ist eigentlich sehr einfach und lässt sich grob in folgende Schritte unterteilen:

Zuerst müssen Sie im übergeordneten Element ein canvas -Tag erstellen, das den Partikelhintergrund anzeigen soll, und width und height angeben. Wenn wir zufällige Punktkoordinaten generieren, müssen wir width und height als Referenz verwenden. width und height entsprechen der Breite und Höhe des übergeordneten Elements.

 // Wenn das übergeordnete Element bodyconst ist ele = document.body;const canvas = document.createElement('canvas');canvas.width = ele.clientWidth;canvas.height = ele.clientHeight;// Fügen Sie das Canvas-Tag in ele ein .appendChild (Leinwand);

Generieren Sie zufällig eine bestimmte Menge an Punktkoordinateninformationen mit width und height als Referenz, einschließlich x , y , rateX (die Bewegungsgeschwindigkeit des Punkts auf der X-Achse), rateY (die Bewegungsgeschwindigkeit des Punkts auf der Y-Achse). , rateX und rateY bestimmen die Bewegung der Punkttrajektorie.

 const points = [];// Generieren Sie zufällig die Koordinaten von Punkten. Sie müssen den Maximalwert der Radiusfunktion angeben getPoint(radius) { const x = Math.ceil(Math.random() * this.width), // Die x-Koordinate des Partikels y = Math.ceil(Math.random() * this.height), // Die y-Koordinate des Partikels r = +(Math.random() * this.radius).toFixed(4) , // Der Radius des Partikels rateX = +(Math.random() * 2 - 1).toFixed(4), // Die Geschwindigkeit der Partikelbewegung in x-Richtung rateY = +(Math.random() * 2 - 1) .toFixed(4) ); // Die Geschwindigkeit der Partikelbewegung in y-Richtung return { x, y, r, rateX, rateY };}// Generiere zufällig die Koordinateninformationen von 100 Punkten für (let i = 0; i < 100; i++) { point.push(this.getPoint());}

Zeichnen Sie das generierte Punktarray auf die Leinwand

 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(); //Verschieben Sie die Koordinaten des Punktes entsprechend rateX und 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 { // Wenn die Partikelbewegung die Grenze überschreitet, verschieben Sie die Partikel Entfernen und regenerieren Sie einen neuen Punkt.

Durchqueren Sie das Punktarray und vergleichen Sie die Koordinaten der Punkte. Wenn der Abstand zwischen den beiden Punkten kleiner als ein bestimmter Wert ist, zeichnen Sie eine lineWidth Linie zwischen den beiden Punkten. Je größer der Abstand ist , desto dünner die Linie.

 // Berechne den Abstand zwischen zwei Punkten 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 ​​​​= point.length; //Beurteilen Sie die Mittelpunktskoordinaten paarweise for(let i = 0; i < len; i++) { for(let j = len - 1; j >= 0; j--) { const x1 = Punkte[i].x, y1 = Punkte[i].y, x2 = Punkte[j]. x, y2 = points[j].y, disPoint = dis(x1, y1, x2, y2); // Wenn der Abstand zwischen zwei Punkten weniger als 150 beträgt, zeichne eine Linie if(disPoint <= 150) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); //Je größer der Abstand zwischen zwei Punkten, desto dünner ist die Linie umgekehrt ctx.lineWidth = 1 - disPoint / distance; } } }}

Verwenden Sie requestAnimationFrame um die draw in einer Schleife aufzurufen (die Zeichenmethode umfasst das Zeichnen von Punkten und Linien) und ändern Sie gleichzeitig die Position des Punkts gemäß rateX und rateY während draw .

 // Rufen Sie die Zeichenfunktion auf, um die Animation zu starten (function draw() { ctx.clearRect(0, 0, width, height); drawPoints(); // Wenn Sie keine Linien zeichnen müssen, brechen Sie einfach die folgende Zeile ab code.drawLines(); window.requestAnimationFrame(draw);}());

Den vollständigen Code finden Sie unter: https://github.com/PengJiyuan/particle-bg

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.