JavaScript-Canvas zum Erzielen eines Regentropfeneffekts

In diesem Artikelbeispiel wird der spezifische Code für JavaScript-Canvas zum Erzielen von Regentropfeneffekten zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Sehen Sie zuerst den Effekt

Es sieht sehr cool aus, realisiert aber tatsächlich das Fallen der Regentropfen und den abschließenden Kreis.

Oder schauen Sie sich den Quellcode an

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

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

        Körper {
            Hintergrundfarbe: #000;
        }
    </Stil>
</Kopf>

<Text>
    <Leinwand></Leinwand>
    <Skript>
        //Leinwand abrufen var canvas = document.querySelector('canvas')
        // Den Pinsel holen var ctx = canvas.getContext('2d')
        // Leinwandgröße kann mit CSS nicht geändert werden, var ch = canvas.height = window.innerHeight
        var cw = canvas.width = window.innerWidth
        // Regentropfen freigeben var arrRain = []
        // Bildschirmgröße überwachen und Leinwandgröße entsprechend ändern window.onresize = function () {
            ch = Leinwand.Höhe = Fenster.Innenhöhe
            cw = Leinwand.Breite = Fenster.Innenbreite
        }
        // Erhalte eine Zufallszahl um zufällige Regentropfen zu erzeugen function randow(min, max) {
            return Math.random() * (max - min) + min
        }
        // Konstruktorfunktion Rain() {

        }
        // Eigenschaften und Methoden zu rain hinzufügen Rain.prototype = {
            // Initialisiere die Position und den Radius des Kreises, auf den die Regentropfen fallen init: function () {
                dies.x = zufällig(0, cw)
                dies.y = 0
                // Die Entfernung, die die Regentropfen schließlich auf dem Boden zurücklegen, darf den Bildschirm nicht überschreiten. this.h = randow(0,8 * ch, 0,9 * ch)
                this.r = 1 // Startradius des Kreises this.vr = 1 // Geschwindigkeit, mit der der Radius wächst this.vy = randow(4, 5)

            },
            // Zeichenmethode draw: function () {
                // Wenn es kleiner als h ist, zeichne Regentropfen und Rechtecke if (this.y < this.h) {
                    ctx.beginPath()
                    ctx.fillStyle = "weiß"
                    ctx.fillRect(dieses.x, dies.y, 4, 10)
                } anders {
                    // Zeichne einen Kreis ctx.beginPath()
                    ctx.strokeStyle = "weiß"
                    ctx.arc(dieses.x, dies.y, dies.r, 0, 2 * Math.PI)
                    ctx.stroke()
                }
            },
            //Regentropfenbewegung move: function () {
                // Wenn es kleiner als h ist, addiere y, um die Regentropfen zu bewegen, if (this.y < this.h) {
                    dies.y += dies.vy
                } anders {
                    // Erziele den Effekt von spritzendem Wasser if (this.r < 70) {
                        dies.r += dies.vr
                    } anders {
                        // Initialisieren Sie nach dem Ende des Effekts und erzeugen Sie Regentropfen vom Himmel. Rufen Sie dazu die Init-Funktion this.init() auf.
                    }
                }
                dies.zeichnen()
            }
        }
        // Regentropfen erzeugen Funktion createRain(num) {
            für (var i = 0; i < num; i++) {
                // Regentropfen zufällig generieren, nicht gleichzeitig setTimeout(function () {
                    var regen = neuer Regen()
                    regen.init()
                    regen.zeichnen()
                    arrRain.push(Regen)
                }, 300 * ich)
            }
        }
        Regen erzeugen(60)
        setzeIntervall(Funktion () {
            ctx.beginPath()
            ctx.fillStyle = "rgba(0,0,0,0,0,05)"
            ctx.fillRect(0, 0, cw, ch)
            für (var k von arrRain) {
                k. bewegen()
            }
        }, 1000 / 80)
    </Skript>
</body>

</html>

Dies sind die von Raindrops implementierten Quellcodes, nur zu Referenzzwecken.

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: