Dieser Artikel stellt den Implementierungscode von Canvas-Text zum Partikeleffekt vor und teilt ihn mit allen. Ich hoffe, dass er für alle hilfreich ist.
Das Zeichnen von Text durch Partikel fühlt sich interessant an, und die Anpassung an die Bewegung der Partikel macht den Effekt noch cooler. In diesem Artikel erfahren Sie, wie Sie Text durch Partikel auf der Leinwand zeichnen.
UmsetzungsprinzipIm Allgemeinen ist es sehr einfach, den Effekt der Umwandlung von Text in Partikel anzuzeigen. Das Prinzip der Implementierung besteht darin, eine Leinwand zu verwenden, die der Benutzer nicht sehen kann, und die andere, die zum Zeichnen von Text verwendet wird Eine, die der Benutzer sehen kann. Die erhaltene B-Leinwand wird verwendet, um Partikel basierend auf den Textdaten von A zu generieren. Die visuelle Darstellung ist wie in der Abbildung dargestellt:
Erstellen Sie eine Leinwand außerhalb des BildschirmsHTML muss nur auf der Hauptleinwand platziert werden:
<!-- HTML-Struktur--><html><head> ...</head><body> <canvas id=stage></canvas></body></html>
Erstellen Sie dann eine Leinwand außerhalb des Bildschirms und zeichnen Sie Text:
const WIDTH = window.innerWidth; const offscreenCanvas = document.createElement('canvas'); const offscreenCanvas.getContext('2d'); offscreenCtx.font = '100px PingFang SC';offscreenCtx.textAlign = 'center';offscreenCtx.baseline = 'middle';offscreenCtx.fillText('Hallo', WIDTH / 2, HEIGHT / 2);Zu diesem Zeitpunkt passiert nichts auf der Seite, aber Sie können es sich tatsächlich auf der Leinwand außerhalb des Bildschirms vorstellen. Es sollte wie in der Abbildung gezeigt sein.
Kernmethode getImageData Mithilfe der getImageData-Methode der Leinwand können Sie ein ImageData Objekt abrufen, mit dem die Pixeldaten im angegebenen Bereich der Leinwand beschrieben werden. Mit anderen Worten: Wir können die Position und Farbe jedes Pixels des Hallo-Textes ermitteln und Partikel an der angegebenen Stelle erzeugen. Der Endeffekt besteht darin, dass die Partikel zu Text zusammengesetzt werden.
Um Pixelinformationen zu erhalten, müssen Sie das data des ImageData Objekts verwenden, das die RGBA-Werte aller Pixel in ein Array verteilt. Die Anzahl dieser Arrays ist 像素点数量* 4 .
Angenommen, ich wähle einen 3 * 4 Bereich aus, dann gibt es insgesamt 12 Pixel, jedes Pixel hat vier RGBA-Werte, sodass das Datenarray 12 * 4 = 48 Elemente hat.
Wenn Sie die Daten ausdrucken, können Sie den RGBA dieser Pixel sehen, angeordnet von links nach rechts und von oben nach unten.
Natürlich muss der Bereich, den wir erhalten möchten, Text enthalten, daher sollten wir den gesamten Off-Screen-Canvas-Bereich erhalten:
const imgData = offscreenCtx.getImageData(0, 0, WIDTH, HEIGHT).data;Partikel erzeugen
Nachdem Sie die ImageData erhalten haben, können Sie durch Durchlaufen des Datenarrays bestimmen, welche Punkte in der Off-Screen-Leinwand farbig sind (in der Mitte des Texts) und welche Punkte farblos sind (nicht im Text), und diese farbigen Pixel schreiben Verschieben Sie die Position nach unten, erzeugen Sie dann Partikel auf der Hauptleinwand, und schon kann es losgehen.
Erstellen Sie zunächst eine Partikelklasse:
Klasse Partikel { Konstruktor (Optionen = {}) { const { x = 0, y = 0, Farbe = '#fff', Radius = 5} = Optionen; = y; this.color = color; } draw (ctx) { ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); ctx.fillStyle = this.color; ctx.closePath( }}Beim Durchlaufen der Daten können wir anhand der Transparenz feststellen, ob sich das Pixel im Text befindet, d. h. ob das vierte Element in RGBA nicht 0 ist.
const Partikel = [];const Skip = 4;for (var y = 0; y < HEIGHT; y += Skip) { for (var x = 0; x < WIDTH; x += Skip) { var opacityIndex = (x + y * WIDTH) * 4 + 3; if (imgData[opacityIndex] > 0) { Particles.push(new Particle({ x, y, radius: 1, Farbe: '#2EA9DF' })); Wir verwenden particles Partikelarray, um alle Partikel zu speichern. Wenn wir Pixel für Pixel scannen, werden die Partikel, die den Text schließlich zusammensetzen skip sehr dicht sein Es werden weniger Partikel erzeugt.
Erstellen Sie abschließend die Hauptleinwand und zeichnen Sie sie:
const Canvas = document.querySelector('#stage');canvas.width = WIDTH;canvas.height = HEIGHT;const ctx = canvas.getContext('2d');for (const Partikel von Partikeln) { Partikel.draw(ctx );}Der Effekt ist wie folgt:
Den vollständigen Code finden Sie unter 01-basic-text-to-particles
Effekte hinzufügenNachdem Sie das Implementierungsprinzip verstanden haben, besteht der Rest tatsächlich darin, den Partikeln einige Animationseffekte hinzuzufügen. Erstens können Sie den Partikeln eine zufällige Verschiebung geben, damit sie nicht zu ordentlich aussehen.
const Partikel = [];const Skip = 4;for (var y = 0; y < HEIGHT; y += Skip) { for (var x = 0; x < WIDTH; x += Skip) { var opacityIndex = (x + y * WIDTH) * 4 + 3; if (imgData[opacityIndex] > 0) { // Beim Erstellen von Partikeln zufällige Verschiebung hinzufügen Partikel.push(neu Particle({ x: x + Math.random() * 6 - 3, y: y + Math.random() * 6 - 3, radius: 1, color: '#2EA9DF' }));Der Effekt ist wie folgt:
Wenn Sie einen größeren Effekt erzielen möchten, wie zum Beispiel:
Wie setzt man das um? Zuerst muss man die Größe der Partikel zufällig generieren. Dazu muss man beim Erstellen der Partikel nur den Radius zufällig festlegen. Wenn Sie möchten, dass sich der Partikelradius dynamisch ändert, müssen Sie außerdem den Renderradius des Partikels vom Anfangsradius unterscheiden und requestAnimationFrame für das Rendern von Animationen verwenden:
Klasse Partikel { Konstruktor (Optionen = {}) { const { x = 0, y = 0, Farbe = '#fff', Radius = 5} = Optionen; // ... this.dynamicRadius = radius; // DynamicRadius-Eigenschaft hinzufügen} draw (ctx) { // ... ctx.arc(this.x, this.y, this.dynamicRadius, 0, 2 * Math.PI, false); Ersetzen durch DynamicRadius // ... } update () { // TODO }}requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, WIDTH, HEIGHT ); for (const Partikel von Partikeln) { Partikel.Update(); Dann liegt der Schlüssel darin, wie die update der Partikel implementiert wird. Angenommen, wir möchten, dass sich der Partikelradius sanft und zyklisch von 1 auf 5 ändert. Man kann sich leicht trigonometrische Funktionen vorstellen, wie zum Beispiel:
Die horizontale Achse sollte sich auf die Zeit beziehen. Sie können eine Variable pflegen und sie bei jedem Aufruf von update hinzufügen. Sie können sie auch einfach anhand des Zeitstempels berechnen. Ein Beispiel für die update ist wie folgt:
update () { this.dynamicRadius = 3 + 2 * Math.sin(new Date() / 1000 % 1000 * this.radius);}Den vollständigen Code finden Sie unter 02-text-to-particles-with-size-changing
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.