Bringen Sie Ihnen bei, Dutzende von Zeilen JS zu verwenden, um coole interaktive Canvas-Effekte zu erzielen

Und hier sind ohne weitere Umschweife die Renderings!

Die Beispielcodes in diesem Artikel wurden aus einem Lehrvideo auf YouTube von einem Ausländer namens Franks kopiert. Er hat auch viele Videos über Canvas veröffentlicht, die es sehr wert sind, gelernt zu werden. Ich bin mit Canvas nicht sehr vertraut, also bin ich dem Meister gefolgt, um den Code einzugeben und mir Lernnotizen zu machen. Ich möchte auch sagen, dass die Seitenstruktur des Beispiels in diesem Artikel sehr einfach ist (HTML enthält nur einen Canvas), daher werde ich den folgenden Codeteil nicht veröffentlichen, schließlich ist JS der Protagonist.

1. Zeichne einen Kreis

Beginnen wir mit dem Zeichnen eines statischen Kreises. Sie müssen nur einige APIs verstehen. Auf MDN gibt es eine ausführliche Beschreibung. Ich werde hier nicht ins Detail gehen. Schauen wir uns einfach den JS-Code an:

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
Leinwand.Breite = Fenster.Innenbreite;
Leinwand.Höhe = Fenster.Innenhöhe;
Funktion zeichneKreis() {
 ctx.beginPath();
 ctx.fillStyle = "blau";
 ctx.arc(10, 10, 10, 0, Math.PI * 2);
 ctx.fill();
 ctx.closePath();
}
zeichneKreis();

Jetzt wird ein Kreis mit einem Radius von 10px gezeichnet. Sogar Leute, die noch nie Canvas verwendet haben, können ihn in kurzer Zeit zeichnen. Es ist sehr einfach. Als nächstes fügen wir auf dieser Grundlage einige Animationen hinzu.

2. Kreis mit der Maus bewegt

Wenn Sie nun möchten, dass sich der Kreis mit der Maus bewegt, müssen Sie das Mausinteraktionsereignis an die Leinwand binden. Hier konzentrieren wir uns auf das Ereignis mousemove/click. Wenn sich die Maus bewegt, ändern sich auch die Koordinaten des Kreises, sodass Sie die Koordinaten des Kreises aktualisieren müssen. Die Animation wird über requestAnimationFrame erreicht. Der Code ist etwas ausführlicher:

const Maus = {};
canvas.addEventListener('Mausbewegung', (e) => {
 Maus.x = Beispiel;
 Maus.y = ey;
});
canvas.addEventListener('klicken', (e) => {
 Maus.x = Beispiel;
 Maus.y = ey;
});
canvas.addEventListener('mouseout', () => {
 Maus.x = Maus.y = undefiniert;
});
Funktion zeichneKreis() {
 ctx.beginPath();
 ctx.fillStyle = "blau";
 ctx.arc(Maus.x, Maus.y, 10, 0, Math.PI * 2);
 ctx.fill();
 ctx.closePath();
}
Funktion animieren() {
 ctx.clearRect(0, 0, Leinwandbreite, Leinwandhöhe);
 zeichneKreis();
 requestAnimationFrame(animieren);
}
animieren();

Der Effekt ist wie folgt. Der Ball kann mit der Maus bewegt werden. Es ist ganz einfach.

Wenn Sie ctx.clearRect in der Animationsfunktion auskommentieren, sieht der Effekt folgendermaßen aus:

3. Mit der Maus gezogene Partikel

Partikel sind einfach eine Menge Kreise mit unterschiedlichen Positionen, Größen und Geschwindigkeiten. Sie können die Partikel basierend auf den Objektinformationen des Mausereignisses initialisieren.

const Maus = {};
// Neue Partikelobjekte beim Klicken oder Bewegen der Maus zum Array hinzufügen function addNewParticles(e) {
 Maus.x = Beispiel;
 Maus.y = ey;
 Array.apply(null, { Länge: 2 }).fürEach(() => {
  : particlesArray.push(neues Partikel());
 });
}
canvas.addEventListener('Mausbewegung', addNewParticles);
canvas.addEventListener('klicken', addNewParticles);
const PartikelArray = [];
Klasse Partikel {
 Konstruktor() {
  dies.x = Maus.x;
  dies.y = Maus.y;
  diese.Größe = Math.random() * 5 + 1;
  this.speedX = Math.random() * 3 - 1.5; // -1.5 ~ 1.5, wenn es eine negative Zahl ist, bewegt es sich nach links, und wenn es eine positive Zahl ist, bewegt es sich nach rechts. Dasselbe gilt für speedY this.speedY = Math.random() * 3 - 1.5;
 }
 aktualisieren() {
  this.size -= 0.1; // Der Kreisradius wird allmählich verringert this.x += this.speedX; // Die Kreiskoordinaten aktualisieren this.y += this.speedY;
 }
 ziehen() {
  ctx.beginPath();
  ctx.fillStyle = "#fff";
  ctx.arc(dieses.x, dieses.y, diese.größe, 0, Math.PI * 2);
  ctx.fill();
  ctx.closePath();
 }
}
Funktion handleParticles() {
 für (lass i = 0; i < particlesArray.length; i++) {
  PartikelArray[i].update();
  PartikelArray[i].draw();
  if (particlesArray[i].size <= 0.3) { // Partikel mit zu kleinem Radius löschen particlesArray.splice(i, 1);
   ich--;
  }
 }
}
Funktion animieren() {
 Partikel handhaben();
 requestAnimationFrame(animieren);
}
animieren();

Jetzt haben wir den ersten Animationseffekt am Anfang des Artikels realisiert. Hier haben wir hauptsächlich eine Partikelklasse hinzugefügt, um das Aktualisieren und Zeichnen von Partikeln zu kapseln, und dann je nach Bedingungen kleinere Partikel gelöscht. Es ist hier immer noch sehr einfach, mit nur ein paar Dutzend Codezeilen, aber der Effekt ist gut.

4. Farbverlaufspartikel

Um einen Farbverlauf zu erzielen, hat der Autor des Videos das HSL-Farbmodell verwendet. Im Vergleich zum uns bekannten RGB-Modus kann die Farbe durch eine Variable gesteuert werden, was sehr praktisch ist. Nehmen Sie also einfach eine kleine Änderung basierend auf dem dritten Codeausschnitt vor:

let hue = 0; // Farbton......
Klasse Partikel {
 ......
 ziehen() {
  ctx.beginPath();
  ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.arc(dieses.x, dieses.y, diese.größe, 0, Math.PI * 2);
  ctx.fill();
  ctx.closePath();
 }
}
Funktion handleParticles() {
 ......
}
Funktion animieren() {
    Farbton++;
    Partikel handhaben();
    requestAnimationFrame(animieren);
 
}
animieren();

Durch dynamisches Einstellen des Farbtonwertes und Ändern des Füllstils des Kreises können Sie Partikel mit Farbverläufen erzeugen. Der Effekt ist wie in der zweiten Animation am Anfang gezeigt.
Auf Grundlage des oben Gesagten können Sie auch neue Tricks anwenden, beispielsweise indem Sie es folgendermaßen ändern:

Funktion animieren() {
 // ctx.clearRect(0, 0, Leinwandbreite, Leinwandhöhe);
 ctx.fillStyle = "rgba(0, 0, 0, 0,2)";
 ctx.fillRect(0, 0, Leinwandbreite, Leinwandhöhe);
 Farbton++;
 Partikel handhaben();
 requestAnimationFrame(animieren);
}

Jetzt haben unsere Partikel einen Trailing-Effekt, der die dritte Animation am Anfang des Artikels ist. Hier wird die Transparenz der gesamten Leinwand überlagert, um den vorherigen Maleffekt verblassen zu lassen und ihn schließlich auszublenden. Aus visueller Sicht handelt es sich um einen Gradient-Trailing-Effekt. Bisher wird der Effekt immer interessanter, aber es gibt noch sehr wenig Code.

5. Verbundene Teilchen

Schließlich müssen wir die Partikel verbinden, was der vierte Animationseffekt am Anfang des Artikels ist. Basierend auf der vorherigen Animation können wir eine gerade Linie zwischen den beiden Kreisen zeichnen. Natürlich müssen wir den Abstand zwischen den Mittelpunkten der beiden Kreise ermitteln und sie dann zeichnen. Dies beinhaltet die Änderung der Funktion handleParticles, und der Rest bleibt unverändert.

Funktion handleParticles() {
 für (lass i = 0; i < particlesArray.length; i++) {
  PartikelArray[i].update();
  PartikelArray[i].draw();
  // Ausgehend vom aktuellen Partikel, durchlaufe die folgenden Partikel und berechne nacheinander die entsprechenden Distanzen for (let j = i + 1; j < particlesArray.length; j++) {
   const dx = PartikelArray[i].x - PartikelArray[j].x;
   const dy = PartikelArray[i].y - PartikelArray[j].y;
   const distance = Math.sqrt(dx * dx + dy * dy); // Kenntnisse auf Mittelschulniveauif (distance < 100) { // Die Distanz ist zu groß, um sie zu verwerfen, da sonst der visuelle Effekt schlecht ist// Zeichne eine gerade Liniectx.beginPath();
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
    ctx.moveTo(partikelArray[i].x, partikelArray[i].y);
    ctx.lineTo(partikelArray[j].x, partikelArray[j].y);
    ctx.stroke();
    ctx.closePath();
   }
  }
  wenn (PartikelArray[i].Größe <= 0,3) {
   PartikelArray.splice(i, 1);
   ich--;
  }
 }
}

Durch Hinzufügen einer Schleife und Zeichnen gerader Linien wird der Effekt erzielt, und er sieht sehr gut aus. Bis hierher bin ich im Wesentlichen den Schritten des Autors gefolgt. Die Codemenge ist nicht groß, aber der Effekt ist sehr gut. Noch wichtiger ist, dass meine Begeisterung für das Erlernen von Canvas neu entfacht wurde.

Zusammenfassen

Damit ist der Artikel abgeschlossen, in dem Sie lernen, wie Sie mit Dutzenden von JS-Zeilen coole interaktive Canvas-Effekte erzielen. Weitere relevante Inhalte zum Erzielen interaktiver Canvas-Effekte mit JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!