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

JavaScript-Canvas zum Erzielen von Regentropfeneffekten

Über die Position des H1-Tags in XHTML

Verwenden Sie Vue3, um eine Komponente zu implementieren, die mit js aufgerufen werden kann

JavaScript implementiert Tab-Leisten-Umschalteffekte

Implementierung von React Routing Guard (Routing-Interception)

Listen Sie Rendering-Anweisungen für eine effiziente Entwicklung des Vue-Frontends auf

Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen

Einfache Implementierungsmethode der Vue3-Quellcodeanalyse

Auszeichnungssprache - Liste

HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche

Artikel empfehlen

So ändern Sie MySQL-Berechtigungen, um Hosts den Zugriff zu ermöglichen

Javascript zum Wechseln von Bildern per Mausklick

Diagramm des Hyperledger Fabric 1.4-Umgebungskonstruktionsprozesses unter Windows 10

Tutorial zur Installation von JDK und Tomcat unter Linux CentOS

Detailliertes Linux-Installationstutorial

Detaillierte Erläuterung der MySQL-Indexprinzipien und -Optimierung

So lösen Sie die Hintergrundkachelung und den Rahmenbruch von CSS-Style-Div oder -Li in IE6

Ein praktischer Bericht über die Wiederherstellung einer MySQL Slave-Bibliothek

Tools zur Bildoptimierung für Webseiten und Tipps zur Verwendung

Eine kurze Diskussion darüber, wie man Div und Tabelle auswählt und kombiniert

So öffnen Sie das MySQL-Binlog-Protokoll

Zusammenfassung ungewöhnlicher JS-Operationsoperatoren

Das neueste, äußerst detaillierte grafische Tutorial zum Herunterladen und Installieren virtueller VMware-Maschinen

10 Tipps für das User Interface Design mobiler Apps

So konfigurieren Sie Umgebungsvariablen in einer Linux-Umgebung