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 3. Spezifische Analyse 1. Welche Eigenschaften werden für die Raindrop-Initialisierung benötigt? 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:
|
<<: 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
Artikel empfehlen
Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt
Inhaltsverzeichnis Lösung 1: Kopieren Sie die Übe...
CentOS 8 offiziell veröffentlicht, basierend auf Red Hat Enterprise Linux 8
Das CentOS-Projekt, ein 100 % kompatibler Neuaufb...
Implementierungsbeispiel zum Hochladen mehrerer Anhänge in Vue
Inhaltsverzeichnis Vorwort Kerncode Datei zeigt e...
So führen Sie Linux-Shell-Befehle in Docker aus
Um einen Shell-Befehl in Docker auszuführen, müss...
So erstellen Sie Ihr eigenes Image mit Dockerfile
1. Erstellen Sie ein leeres Verzeichnis $ cd /hom...
Ideen und Methoden zur inkrementellen Sicherung einer MySQL-Datenbank
Um eine inkrementelle Sicherung der MySQL-Datenba...
Detaillierte Erklärung der Grundfunktionen und Verwendung von MySQL-Fremdschlüsseln
Dieser Artikel veranschaulicht anhand von Beispie...
Detaillierte Erläuterung des Problems, dass der Speicherplatz nach dem Löschen der Linux-Datei nicht freigegeben wird
Vorwort Wenn der Systemspeicherplatz zu groß ist ...
Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?
Das Vergessen des Passworts ist ein Ärgernis. Was...
Ein Artikel zum Lösen des Echarts-Kartenkarussell-Highlights
Inhaltsverzeichnis Vorwort Aufgabenliste tun Sie ...
Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet
Vorwort Manchmal habe ich das Gefühl, dass die na...
Detaillierte Erläuterung des Garbage Collection-Mechanismus von JavaScript
Inhaltsverzeichnis Warum brauchen wir Garbage Col...
Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder
Das im Projekt aufgetretene Layoutproblem unregel...
MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)
String-Extraktion ohne Trennzeichen Fragenanforde...
Detaillierte Erläuterung des Vue Lazyload-Beispiels für verzögertes Laden von Bildern
Dokumentation: https://github.com/hilongjw/vue-la...