Beispiel für die Verwendung von Leinwand, um einen schönen Regeneffekt zu erzielen

In diesem Artikel geht es darum, wie man mit Leinwand einen schönen Regeneffekt zeichnet. Schauen wir uns zunächst den endgültigen Effekt an.

Darstellungen

Schauen Sie sich das Bild an, um zu analysieren, welche Effekte wir erzielen müssen.

1. Regentropfen-Falleffekt. Bewegen Sie die Maus, um die Fallrichtung zu steuern

2. Die Regentropfen fallen und zerstreuen sich in kleine Wassertropfen. Die Bewegungsrichtung der kleinen Wassertropfen entspricht der Bewegungsrichtung der Maus.

3. Die Regentropfen fallen in einen bestimmten Bereich der Mauskoordinaten und zerstreuen sich in kleine Wassertropfen. Ebenso ist die Bewegungsrichtung der kleinen Wassertropfen dieselbe wie die Bewegungsrichtung der Maus.

Okay, lassen Sie uns den gesamten Effekt grob in drei Effekte aufteilen und diese drei Effekte erzielen, und wir sind fertig.

Machen wir es Schritt für Schritt.

Die Idee, den gesamten Effekt zu erzielen, ist:

Verwenden Sie ein Array, um Regentropfenobjekte zu speichern.

Ein Regentropfenobjekt verfügt über verschiedene Attribute, die die X-Koordinate, die Y-Koordinate, die Länge, die Fallgeschwindigkeit und die Farbe des Regentropfens darstellen, sowie eine Markierung, mit der bestimmt wird, ob der Regentropfen gelöscht werden soll.

Fügen Sie dem Array eine bestimmte Anzahl von Regentropfenobjekten hinzu, durchlaufen Sie dann das Array, ändern Sie die X- und Y-Koordinate jedes Regentropfenobjekts und zeichnen Sie mithilfe der Leinwand zwei Punkte basierend auf den Koordinaten des Regentropfenobjekts, die zusammen ein bilden Regentropfen.

Der Schlüssel zum Erreichen des Effekts sind also die Koordinaten

Regentropfen-X-Koordinate: eine Zufallszahl

Y-Koordinate des Regentropfens: -100, damit Regentropfen von außerhalb des sichtbaren Bereichs eindringen können

Regentropfen-x-Koordinate:原x坐标的值+ speed * speedx

Geschwindigkeit ist ein fester Wert, der die Fallgeschwindigkeit von Regentropfen angibt.

speedx ist eine Variable, die sich auf die Richtung der Mausbewegung bezieht, speedx = speedx + (maxspeedx - speedx) / 50

Und maxspeedx ist ein Wert, der basierend auf der Richtung der Mausbewegung ermittelt wird.

maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2) ,

e.clientX: Der Wert des Mausabstands links vom sichtbaren Bereich

canvasEl.clientWidth: Breite des gesamten visuellen Bereichs

Mit anderen Worten, Geschwindigkeitx ist ein Wert, der sich allmählich der Höchstgeschwindigkeitx nähert

Der Wertebereich von maxspeedx liegt zwischen -1 und 1. Je näher der Wert bei -1 liegt, desto weiter links liegt die Richtung. Je näher der Wert bei 1 liegt, desto weiter rechts ist die Richtung.

Warum nicht einfach maxspeedx verwenden?

Dadurch soll verhindert werden, dass die Regentropfen die Richtung so schnell ändern, dass sie direkt nach dem Mauswechsel geändert werden, damit es besser aussieht.

Wenn Sie maxspeedx verwenden, ist der Effekt wie folgt

Wenn Sie speedx verwenden, ist der Effekt so

Y-Koordinate des Regentropfens:原y坐标的值+ speed

Die Geschwindigkeit ist die gleiche wie in der x-Koordinate oben erwähnt. Es handelt sich um einen festen Wert, der die Fallgeschwindigkeit von Regentropfen darstellt.

Okay, schließlich zeichne ich mit Canvas zwei Punkte entsprechend den Koordinaten des Regentropfenobjekts, verbinde sie dann und der Regentropfen wird gezeichnet.

Die erste Punktkoordinate ist relativ einfach. Ermitteln Sie direkt die x-Koordinate und die y-Koordinate des Regentropfenobjekts, die die Koordinate dieses Punktes ist.

Koordinaten des zweiten Punktes:

x坐标= 雨滴x坐标的值+ 雨滴长度* speedx

y坐标= 雨滴y坐标的值+ 雨滴长度

Wenn Sie schließlich diese beiden Punkte verbinden, entsteht eine Linie, die einen Regentropfen darstellt.

Beim Festlegen der x-Koordinate wird erneut die Variable speedx verwendet, um die Richtung des Regentropfens und die Fallrichtung des Regentropfens anzugleichen.

Wenn speedx nicht verwendet wird, ist es so

Bei der Verwendung von speedx ist dies der Fall

Die Idee hier ähnelt tatsächlich dem obigen Effekt.

Verwenden Sie ein Array, um kleine Wassertropfenobjekte zu speichern.

Ein kleiner Wassertropfen ist eigentlich ein Kreisbogen.

Ein kleines Wassertropfenobjekt verfügt über verschiedene Attribute, die die Koordinaten des kleinen Wassertropfens, die Bewegungsgeschwindigkeit der x-Achse, die Bewegungsgeschwindigkeit der y-Achse, den Radius des Kreises und eine Markierung darstellen, um zu bestimmen, ob es gelöscht werden soll.

Fügen Sie dem Array eine bestimmte Anzahl kleiner Wassertropfenobjekte hinzu, durchlaufen Sie dann das Array, ändern Sie die x- und y-Koordinate jedes kleinen Wassertropfenobjekts und zeichnen Sie mithilfe der Leinwand einen Bogen basierend auf den Koordinatenattributen und Radiusattributen der kleinen Objekte Wassertropfenobjekt.

Daher liegt der Fokus zur Erzielung des Effekts immer noch auf den Koordinaten

Wenn der Regentropfen verschwindet, erscheinen kleine Wassertropfen, daher basieren die Koordinaten des kleinen Wassertropfens auch auf den Koordinaten des Regentropfens. Wenn Sie einen Regentropfen löschen, erscheinen einige kleine Wassertropfen und die Bewegungsrichtung des kleinen Wassertropfens auch die Richtung des Regentropfens Maus Die Bewegungsrichtung ist dieselbe, daher wird die oben erwähnte variable Geschwindigkeitx weiterhin benötigt.

小水珠x坐标： 删除的雨滴x坐标+ 删除的雨滴长度* speedx

小水珠y坐标：删除的雨滴y坐标+ 删除的雨滴长度

Hier müssen wir zwei Attribute des kleinen Wassertropfenobjekts vx (Änderungsgeschwindigkeit des Werts der x-Achse) und vy (Änderungsgeschwindigkeit des Werts der y-Achse) verwenden.

Die x-Koordinate des kleinen Wassertropfens

vx = vx + speedx / 2

小水珠的x坐标=原x坐标+ vx ,

speedx: eine Variable, die sich auf die oben erwähnte Mausbewegungsrichtung bezieht. Die Funktion besteht hier darin, die Bewegungsrichtung der kleinen Wassertropfen in die gleiche Richtung wie andere Richtungen zu steuern.

speedx / 2 , der Zweck der Division durch 2 besteht darin, die Bewegungsstrecke der kleinen Wassertröpfchen auf der x-Achse zu verkürzen und realistischer aussehen zu lassen.

Die y-Koordinate des kleinen Wassertropfens

vy = vy + gravity

小水珠的y坐标= 原y坐标+ vy;

vy: eine negative Zahl

Schwerkraft: Schwerkraft, eine positive Zahl, im vollständigen Code auf 0,5 gesetzt

Da die ursprüngliche y-Koordinate eine positive Zahl ist, nimmt der Wert der y-Koordinate des kleinen Wassertropfens zunächst ab und steigt dann an. Dadurch wird erreicht, dass der kleine Wassertropfen zuerst steigt und dann fällt

Zum Schluss zeichnen Sie einfach mit Canvas einen Bogen basierend auf den Koordinatenattributen und Radiusattributen des kleinen Wassertropfens. Der Bogen ist zufällig.

3. Die Regentropfen fallen in einen bestimmten Bereich der Mauskoordinaten und zerstreuen sich in kleine Wassertropfen. Ebenso ist die Bewegungsrichtung der kleinen Wassertropfen dieselbe wie die Bewegungsrichtung der Maus.

Es ist einfach, die Größe des Kreises im Bild zu bestimmen. Angenommen, der Radius des Kreises beträgt 35. Wir können die Koordinaten der Maus als Mittelpunkt des Kreises und 35 als Radius ermitteln , können wir die Größe des Kreises bestimmen.

Der entscheidende Punkt ist, wie man beurteilen kann, ob die Regentropfen diesen Bereich erreicht haben. Dazu ist die Verwendung des Satzes des Pythagoras erforderlich. Schauen Sie sich das Bild an.

Da ein Regentropfen eine Linie ist, die zwei Punkte verbindet, müssen Sie sich die Koordinaten des Punktes unterhalb des Regentropfens ansehen AB im Bild.

Satz des Pythagoras: Die Summe der Quadrate der beiden rechtwinkligen Seiten eines rechtwinkligen Dreiecks ist gleich dem Quadrat der Hypotenuse.

AB = Math.sqrt(BC BC + AC AC)

BC = Regentropfen-X-Koordinate – Maus-X-Koordinate

AC = Regentropfen-Y-Koordinate - Maus-Y-Koordinate

Die Methode Math.sqrt() wird verwendet, um die Quadratwurzel einer Zahl zu berechnen

Nachdem wir den geradlinigen Abstand vom Regentropfen zur Maus kennen, vergleichen wir ihn mit dem Radius des Kreises. Wenn er größer als der Radius ist, liegt er nicht innerhalb des Bereichs.

Wenn es in Reichweite ist, löschen Sie die Regentropfen und zeichnen Sie einige kleine Wassertropfen.

Zusammenfassen

Um diesen Effekt zu erzielen, liegt das Problem in der Richtung der Regentropfen, der Richtung der fallenden Regentropfen und der Bewegungsrichtung kleiner Wassertropfen. Diese hängen alle mit der Richtung der Mausbewegung zusammen. Verwenden Sie Canvas, um kontinuierlich Linien basierend auf der Entfernung zu zeichnen. Ein Bogen reicht aus.

Vollständiger Code

 <!doctype html><html lang=en><head> <meta charset=UTF-8> <style> * { margin: 0; padding: 0; </style></head><body> <canvas id =canvas style=position: absolute; height: 100%; width:100%;></canvas> <script> window.onload = main; function main() { // Holen Sie sich das Canvas-Element var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); // Die Hintergrundfarbe der Leinwand. var backgroundColor = '#000'; // Die Breite der Leinwand Breite des visuellen Bereichs canvasEl. width = canvasEl.clientWidth; // Die Höhe des Canvas-Bereichs entspricht der Höhe des sichtbaren Bereichs canvasEl.height = canvasEl.clientHeight; // Array zum Speichern kleiner Wassertropfen // Nachdem die Regentropfen gefallen sind, zerstreuen sie sich in kleine Wassertropfen dann fallen, hauptsächlich aufgrund der Schwerkraft. // Das Array der Regentropfen speichern. // Jeder Regentropfen ist eine gezeichnete Linie ] Stellt den Wert der x-Achse dar, mousePos[1] stellt den Wert der y-Achse dar var mousePos = [0, 0] // Wenn Sie der Maus folgen, verschwinden die Regentropfen im MouseDis-Größenbereich und bilden einen Streueffekt // Mit MousePos als Mittelpunkt des Kreises, MouseDis ist Radius, die Regentropfen innerhalb dieses Bereichs breiten sich aus und bilden viele kleine Wassertropfen. var MouseDis = 35; // Aktualisieren Sie die Animation einmal und zeichnen Sie lineNum Raindrops , desto dichter wird der Regen sein lineNum = 3; // Folgen Sie der Richtung der Maus, um die Regenrichtung zu ändern. // Nachdem sich die Maus bewegt hat, ändert sich die Regenrichtung langsam, hauptsächlich abhängig von der Variablen speedx var speedx = 0; // maxspeedx ist das Maximum Wert, den speedx annehmen kann // Wenn speedx = maxspeedx, ändert sich die Regenrichtung sofort mit der Richtung der Mausbewegung var maxspeedx = 0 // Wenn sich die Seitengröße ändert, setzen Sie die Leinwandgröße zurück window.onresize = function () { canvasEl.width = canvasEl.clientWidth; canvasEl.height = canvasEl.clientHeight; } //Bewege die Maus, um das Ereignis auszulösen window.onmousemove = function (e) { //setze die Mausposition auf die Mauskoordinaten // e.clientX ist der Abstand zum links vom sichtbaren Bereich des Browserfensters Abstand // e.clientY ist der Abstand vom oberen Rand des sichtbaren Bereichs des Browserfensters mousePos[0] = e.clientX[1] = e.clientY; // Stellen Sie den Wert von maxspeedx über die Mausposition ein. Der Wertebereich liegt zwischen -1 und 1. // Der Wert von maxspeedx bezieht sich auf // 1. Die Richtung des Regentropfens // 2. Die Richtung des Regentropfen fallen // 3. Die Geschwindigkeit, mit der sich die Fallrichtung von Regentropfen mit der Richtung der Mausbewegung ändert // 4. Die Bewegungsrichtung kleiner Wassertropfen // Je näher der Wert an 1 liegt, desto weiter rechts ist die Richtung // Je näher der Wert an -1 liegt, desto weiter links ist die Richtung maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2); // Gemäß den Parametern eine RGB-Farbe zurückgeben, die zum Festlegen der Farbe der Regentropfen verwendet wird function getRgb(r, g, b) { return rgb( + r + , + g + , + b + ); } // Zeichne einen Regentropfen (eine Linie) function createLine(e) { // Erzeuge zufällig die Länge des Regentropfens var temp = 0,25 * (50 + Math.random() * 100); // Ein Linienobjekt, das einen Regentropfen darstellt var line = { // Geschwindigkeit des Regentropfens: 5,5 * (Math.random() * 6 + 3), / / Bestimmen Sie, ob gelöscht werden soll. Wenn der Wert wahr ist, löschen Sie ihn die: false, // Regentropfen-X-Koordinate posx: e, // Regentropfen-Y-Koordinate posy: -50, // Regentropfenlänge h: temp, // Farbe der Regentropfen color: getRgb(Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75)) }; // Gut erstellen line (Regentropfen)-Objekt, hinzugefügt zum Array mit Regentropfen linelist.push(line); Zeichne einen kleinen Wassertropfen (die kleinen Wassertropfen, nachdem sich die Regentropfen verteilt haben, sind Bögen) function createDrop(x, y) { // Ein Tropfenobjekt, das einen Bogen darstellt var drop = { // Bestimmen, ob gelöscht werden soll, Wert Wenn true, löschen die: false, // Die x-Koordinate des Bogenmittelpunkts posx: x, // Die y-Koordinate des Bogenmittelpunkts posy: y, // vx stellt die Geschwindigkeit dar, mit der sich der x-Achsenwert ändert vx: (Math.random ( ) - 0,5) * 8, // vy stellt die Geschwindigkeit dar, mit der sich der Wert der y-Achse ändert. Der Wertebereich ist: -3 bis -9 vy: Math.random() * (-6) - 3, // The Radius des Bogens radius: Math. random() * 1.5 + 1 } // Zeichne eine bestimmte Anzahl kleiner Wassertropfen function madedrops(x, y) { // Erzeuge zufällig eine Zahl maxi // maxi Stellt die Anzahl der zu zeichnenden kleinen Wassertropfen dar. var maxi = Math.floor(Math.random() * 5 + 5); for (var i = 0; i < maxi; i++) { dropList.push(createDrop(x, y) ); } } // Starten Sie den Aufruf der Update-Funktion, um die Animation zu aktualisieren window.requestAnimationFrame(update); // Aktualisieren Sie die Animationsfunktion update() { // Wenn das Array mit den kleinen Wassertropfen Inhalt hat (dropList.length > 0) { // Das Array durchlaufen, das kleine Wassertropfen enthält dropList.forEach(function (e) { // e.vx festlegen, vx stellt die Geschwindigkeit der x-Koordinatenänderung dar // (speedx)/2 ist zum: Machen Sie die Bewegungsentfernung der kleinen Wassertröpfchen auf der x-Achse kürzer und sehen Sie realistischer aus // Machen Sie außerdem die Bewegungsrichtung der kleinen Wassertröpfchen mit der Richtung der Regentropfen, der Fallrichtung der Regentropfen usw. identisch die Bewegungsrichtung der Maus e.vx = e.vx + (Geschwindigkeitx / 2); e.posx = e.posx + e.vx; // Setze e.vy, vy stellt die Geschwindigkeit der Änderung der y-Koordinate dar // Der Bereich von e.vy liegt zwischen -3 und -9, und zwar zu diesem Zeitpunkt e.posy (y-Koordinate) muss ein positiver Wert sein, sodass der Wert von e.posy zuerst abnimmt und dann zunimmt // das heißt, die Regentropfen zerstreuen sich in kleine Wassertröpfchen, und die kleinen Wassertröpfchen steigen zuerst auf und dann Fall. e.vy = e.vy + Schwerkraft; + e.vy; // Wenn die y-Koordinate des kleinen Wassertropfens größer als die Höhe des sichtbaren Bereichs ist, setzen Sie das Würfelattribut auf true // Wenn der kleine Wassertropfen den sichtbaren Bereich überschreitet, löschen Sie ihn, wenn (z. posy > canvasEl.clientHeight) { e .die = true; } } } // Löschen Sie das Array-Mitglied, dessen die-Attribut wahr ist // Löschen Sie die kleinen Wassertropfen außerhalb des sichtbaren Bereichs für (var i = dropList.length - 1 ; i >= 0; i- -) { if (dropList[i].die) { dropList.splice(i, 1); } // Geschwindigkeit der Regenrichtungsänderung festlegen, Wertebereich: -1 bis 1 // Wenn speedx = maxspeedx, ändert sich die Regenrichtung speedx sofort, wenn sich die Maus bewegt Richtung = speedx + (maxspeedx - speedx) / 50; // Zeichne eine bestimmte Anzahl von Regentropfen basierend auf dem Wert von lineNum for (var i = 0; i < lineNum; i++) { // Rufen Sie die Funktion createLine auf. Der Parameter ist die x-Koordinate des Regentropfens createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width)); Regentropfen breiten sich aus und bilden viele kleine Wassertropfen. Position var endLine = canvasEl.clientHeight - Math.random() * canvasEl.clientHeight / 5; Durchlaufen Sie das Array mit den Regentropfen linelist.forEach(function (e) { // Verwenden Sie den Satz des Pythagoras, um einen Bereich zu bestimmen, in dem sich die Regentropfen ausbreiten, um kleine Wassertropfen zu bilden // e.posx + speedx * eh ist die x-Koordinate von der Regentropfen/ / e.posy + eh ist die y-Koordinate des Regentropfens var dis = Math.sqrt(((e.posx + speedx * eh) - mousePos[0]) * ((e.posx + speedx * eh) - MousePos[0]) + (e.posy + eh - MousePos[1]) * (e.posy + eh - MousePos[1]) // Wenn es sich im MouseDis-Bereich befindet, löschen Sie den Regentropfen und zeichne einige kleine Wassertropfen (Bögen) // Erkenne den Effekt, wenn die Maus die Regentropfen berührt und die Regentropfen in kleine Wassertropfen zerstreuen. if (dis <mouseDis) { // Lösche die Regentropfen e.die = true; // Zeichnen einige kleine Wassertropfen (Kreisbogen) madedrops(e.posx + speedx * eh, e.posy + eh); } // Wenn die Regentropfen die Endlinie überschreiten, löschen Sie die Regentropfen und zeichnen Sie einige kleine Wassertropfen (Bögen), wenn ((e.posy + eh) > endLine) { e.die = true; madedrops(e.posx + speedx * eh, e.posy + eh } // Wenn die y-Koordinate des Regentropfens größer als die Höhe des sichtbaren Bereichs ist, setze den Würfel Attribut auf wahr // Wenn der Regentropfen den sichtbaren Bereich überschreitet, löschen Sie ihn. if (e.posy >= canvasEl.clientHeight) { e.die = true } else { // Erhöhen Sie schrittweise den Wert der Y-Koordinate des Regentropfens e.posy = e. posy + e.speed ; // Ändere die x-Koordinate des Regentropfens // * speedx wird verwendet, um die Fallrichtung des Regentropfens zu steuern // Die Fallrichtung des Regentropfens an die Bewegungsrichtung der Maus anpassen e.posx = e .posx + e.speed * speedx; Löschen Sie die Array-Mitglieder, deren die-Attribut wahr ist // Löschen Sie die Regentropfen im Mausbereich, hinter der Endlinie und außerhalb des sichtbaren Bereichs for (var i = linelist.length - 1; i >= 0; i--) { if (linelist[i].die) { linelist.splice(i, 1); // Rendern render(); // Rekursiv aufrufen, um einen Animationseffekt zu erzielen window.requestAnimationFrame(update); // Rendering-Funktion render() { // Ein Rechteck zeichnen, das so groß ist wie der sichtbare Bereich ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); // Einen Regentropfeneffekt zeichnen ctx; lineWidth = 5; linelist.forEach(function (line) { ctx.StrokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); // * speedx wird verwendet, um die Richtung der Regentropfen zu steuern // Die Richtung der Regentropfen an die Richtung der Mausbewegung anpassen ctx.lineTo(line.posx + line. h * speedx, line.posy + line.h); ctx.Stroke(); }); dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.Stroke(); }); MousePos[1], MouseDis, 0, 2 * Math.PI); ctx.Stroke(); */ } </script></body></html>

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.