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

So verwenden Sie Elemente in React-Projekten

JavaScript-Canvas zum Erzielen von Regentropfeneffekten

So verwenden Sie Elemente in React-Projekten

Zusammenfassung der Mysql-Existes-Verwendung

Einführung in die Partitionierung des Stammverzeichnisses von Ubuntu mit der virtuellen Maschine Vmvare

Installations- und Konfigurationstutorial von MySQL 8.0.16 unter Win10

Detaillierte Erklärung der TMPF-Mounts im Docker-Datenspeicher

Implementierung der Nginx-Routing-Weiterleitung und der Reverse-Proxy-Standortkonfiguration

MySQL-Installationstutorial unter Centos7

Javascript Blob-Objekt zum Erzielen eines Dateidownloads

Codebeispiel zum Erreichen des internen Ankerpunkts einer Webseite durch reines CSS beim Auf- und Ab-Offset

Detaillierte Schritte zur Installation von Docker in 5 Minuten

Artikel empfehlen

JavaScript implementiert drei gängige Webeffekte (Offset, Client, Scroll-Serie).

Beispielcode zur Implementierung eines Karten-Wasserfall-Layouts mit CSS3-Spalten

Tipps zur MySql-SQL-Optimierung teilen

So verwenden Sie IDEA zum Konfigurieren von Tomcat und Erstellen von JSP-Dateien

So verarbeiten Sie Blob-Daten in MySQL

Tägliches automatisches Backup der MySQL-Datenbank mit mysqldump in Centos7 schreiben

So ändern Sie die Ali-Quelle in Ubuntu 20.04

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)

Ausführliche Erklärung der Umgebungsvariablen und Konfigurationsdateien in CentOS

Vue implementiert den Operationscode zum Klicken auf eine Schaltfläche zum Herunterladen einer Datei (Backend-Java).

Detaillierte Erläuterung der Funktionen und Verwendung allgemeiner MySQL-Speicher-Engines

Eine kurze Erläuterung, warum Daemon Off beim Ausführen von Nginx in Docker verwendet wird

Detailliertes Tutorial zur Installation von mysql8.0.22 auf Alibaba Cloud centos7

CentOS7-Netzwerkkonfiguration unter virtueller VMware-Maschine (Host für drahtlosen Internetzugang)