JavaScript-Canvas zum Erzielen von Regentropfeneffekten

In diesem Artikelbeispiel wird der spezifische Code der Leinwand zur Erzielung von Regentropfeneffekten als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Voraussetzungen für Regentropfen-Spezialeffekte

Regentropfen fallen zufällig vom oberen Rand des Fensters nach unten und erscheinen als Wellen, die sich allmählich ausbreiten und verblassen, bis sie verschwinden. Der Regentropfeneffekt passt sich den Änderungen des Fensters an.

2. Raindrop-Implementierungsidee

1. Verwenden Sie objektorientiertes Denken, um zunächst eine Leinwand zu erstellen und eine erste Form eines Regentropfens zu zeichnen
2. So verleihen Sie Regentropfen Bewegung
3. Verwenden Sie einen Timer, um die Regentropfen zu bewegen

3. Spezifische Analyse

1. Welche Eigenschaften werden für die Raindrop-Initialisierung benötigt?
Koordinaten x, y Breite und Höhe w, h.
2. Regentropfen fallen allmählich und beschleunigen, anstatt mit konstanter Geschwindigkeit zu fallen. Wir müssen ihnen ein Beschleunigungsattribut geben, d. h. die Koordinaten der Y-Achse werden ständig mit dem Beschleunigungswert addiert.
3. Wenn die Regentropfen auf einen bestimmten Bereich am Boden fallen, beginnen sie, Wellen zu bilden und sich allmählich auszubreiten. Das heißt, wenn sie einen bestimmten Bereich am Boden erreichen, beginnen sie, Kreise zu zeichnen, die allmählich größer und heller werden und Transparenz hinzufügen.
4. Der Nachzieheffekt fallender Regentropfen erfordert das Zeichnen einer Schattenschicht, um die zuvor bewegten Regentropfen abzudecken

4. Code

<!DOCTYPE html>
<html lang="de">

<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Leinwand</title>
 <Stil>
  * {
   Rand: 0;
   Polsterung: 0;
  }

  Leinwand {
   vertikale Ausrichtung: Mitte;
   Hintergrund: #000;
  }
 </Stil>
</Kopf>

<Text>
 <canvas id="myCanvas"></canvas>
 <Skript>
  //Eine Leinwand erstellen let myCanvas = document.getElementById('myCanvas')
  lass ctx = myCanvas.getContext('2d')
  // Adaptives Fenster let width = myCanvas.width = window.innerWidth
  let Höhe = meineCanvas.Höhe = Fenster.innereHöhe
  window.addEventListener('Größe ändern', () => {
   Breite = meineLeinwand.Breite = Fenster.innereBreite
   Höhe = meineLeinwand.Höhe = Fenster.innereHöhe
  })
  // Regentropfen zeichnen let raindropArr = []
  Funktion Regentropfen(x, y, w, h, l, r, dr, maxR, a, va) {
   this.x = rand(0, window.innerWidth) // x-Achse der Regentropfenthis.y = y || 0 // y-Achse der Regentropfenthis.dy = rand(2, 4) // Beschleunigung der Regentropfenthis.w = w || 2 // Breite der Regentropfenthis.h = h || 10 // Höhe der Regentropfenthis.l = rand(0.8 * height, 0.9 * height) // Fallhöhe der Regentropfenthis.r = r || 1 // Wellenradiusthis.dr = dr || 1 // Wellenzunahmeradiusthis.maxR = maxR || 50 // Maximaler Wellenradiusthis.a = a || 1 // Wellentransparenzthis.va = 0.96 // Wellentransparenzkoeffizient}
  Regentropfen.Prototyp = {
   zeichnen: Funktion (Index) { // Regentropfen zeichnen wenn (this.y > this.l) {
     ctx.beginPath()
     ctx.arc(dieses.x, dies.y, dies.r, 0, Math.PI * 2)
     ctx.strokeStyle = `rgba(0,191,255,${this.a})`
     ctx.stroke()
    } anders {
     ctx.fillStyle = "Himmelblau"
     ctx.fillRect(dieses.x, dies.y, dies.w, dies.h)
    }
    dies.update(index)
   },
   update: function (index) { // Aktualisiere die Koordinaten des zu verschiebenden Regentropfens, wenn (this.y > this.l) {
     wenn (this.a > 0,03) {
      dies.r += dies.dr
      wenn (dies.r > dies.maxR) {
       dies.a *= dies.va
      }
     } anders {
      dies.a = 0
      RegentropfenArr.splice(Index, 1)
     }
    } anders {
     dies.y += dies.dy
    }
   }
  }
  Funktion rand(min, max) {
   return Math.random() * (max - min) + min
  }
  setzeIntervall(() => {
   lass Regentropfen = neuer Regentropfen()
   RegentropfenArr.push(Regentropfen)
  }, 100)
  setzeIntervall(() => {
   ctx.fillStyle = "rgba(0, 0, 0, 0,1)"
   ctx.fillRect(0, 0, meineCanvas.Breite, meineCanvas.Höhe)
   für (lass i = 0; i < raindropArr.length; i++) {
    RegentropfenArr[i].draw(i)
   }
  }, 30)
 </Skript>
</body>

</html>

V. Fazit

Grundsätzlich werden alle Bewegungen und Spezialeffekte der Leinwand durch die Änderung der Koordinaten über einen JS-Timer erzielt.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JavaScript-Canvas zum Erzielen eines Regentropfeneffekts

<<: Verschiedene Arten von Codebeispielen für das Plug-In für die jQuery-Webseitenüberprüfung

>>: JavaScript zum Implementieren des Click-to-Switch-Bestätigungscodes und der Bestätigung

Der Abstand zwischen mehreren Divs mit Inline-Block unterscheidet sich von der Programmiermethode

JavaScript-Canvas zum Erzielen von Regentropfeneffekten

Der Abstand zwischen mehreren Divs mit Inline-Block unterscheidet sich von der Programmiermethode

Native js realisiert das Ziehen und Ablegen des Neun-Quadrat-Rasters

Einführung und Analyse von drei Binlog-Formaten in MySQL

Reines CSS für eine coole Ladeanimation

Beispielcode zur Implementierung einer Mehrfachauswahl basierend auf einer verschachtelten Tabelle in ElementUI

Ubuntu20.04 VNC-Installation und Konfigurationsimplementierung

So implementieren Sie eine bidirektionale MySQL-Sicherung

Verwenden von Zabbix zum Überwachen des Betriebsvorgangs des Oracle-Tabellenbereichs

So verwenden Sie Balkendiagramme in Vue und ändern die Konfiguration selbst

So migrieren Sie den MySQL-Speicherort auf eine neue Festplatte

Artikel empfehlen

Welche Funktion ist !-- -- im HTML-Seitenstil?

CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung

Ein Beispiel für die Verwendung von nginx zum Konfigurieren mehrerer Laravel-Projekte mit einem Domänennamen

Praktischer grundlegender Beispielcode für den Linux-Befehl sed

Beispielcode zum Implementieren eines gleichbreiten Layouts auf verschiedene Arten mithilfe von CSS

Implementierung der CentOS8.0-Netzwerkkonfiguration

CSS3-Übergang zur Implementierung eines Benachrichtigungsnachrichtenkarussells

Implementierung des Nginx-Proxy-Ports 80 bis Port 443

Detailliertes Tutorial zur Installation von JDK1.8 unter Linux

Detaillierte Erläuterung der Verwendung von MySQL Explain (Analyseindex)

Vue-Komponente kapselt Beispielcode zum Hochladen von Bildern und Videos

Einfaches Tutorial zum Herunterladen und Installieren der komprimierten Version von MySQL 5.7.20

Docker verwendet Git, um den detaillierten Prozess der Jenkins-Release- und Testprojekte zu implementieren

React-Prinzipien erklärt

Detaillierte Erläuterung der Docker-Container-Lebenszyklusarchitektur und der Unterschiede zwischen dieser und VM