So erzielen Sie einen Schneeeffekt in HTML5

Verwenden Sie Leinwand, um einen Schneeeffekt zu erzielen:

Lassen Sie uns zuerst diesen Effekt analysieren:

1, zufällige Schneeflocken erzeugen

2, die Schneeflocken entstehen nicht gleichzeitig, sondern nacheinander

3. Wie schneit es kontinuierlich

5 ?Nachdem ich ein wenig

die oben genannten Probleme herausgefunden hatte, wurde dieser Effekt im Grunde realisiert

Da es sich um einen Vollbildeffekt handelt, habe ich dazu eine dynamisch erstellte Leinwand verwendet Zeigen Sie den gesamten Browser an. Weisen Sie der Leinwand die Breite und Höhe zu. Nach dem Aufruf der Init-Methode des oCanvas-Objekts wird eine Leinwand an das Ende des Körpers angehängt id ist Leinwand und die Breite und Höhe sind die gleichen wie die des Browsers. Die Breite und Höhe sind gleich, der Hintergrund ist schwarz, der Effekt von Schnee in der Nacht

Als nächstes gibt es eine Bühne. Es ist Zeit für die Schauspieler, auf die Bühne zu kommen. Wie erzeugt man Schneeflocken? Hier werden schneebezogene Operationen in einer Klasse gekapselt. Ihre Grundstruktur ist wie folgt:

var Canvas = function (w, h) {
                this.width = w;
                this.height = h;
            }
            Canvas.prototype = {
                init: function () {
                    var oC = document.createElement("canvas");
                    oC.setAttribute('width', this.width);
                    oC.setAttribute('height', this.height);
                    oC.setAttribute('id', 'canvas');
                    oC.style.backgroundColor = '#000';
                    document.body.appendChild(oC);
                }
            }
            var curWinWidth = window.innerWidth,
                curWinHeight = window.innerHeight;
            var oCanvas = new Canvas(curWinWidth, curWinHeight);
            oCanvas.init();

Diese Klasse verfügt über insgesamt drei Methoden (Init, Draw, Update).

init: Initialisiert die Position der Schneeflocke (x-, y-Koordinaten), die Geschwindigkeit und den Radius (die Größe der Schneeflocke, hier stellen wir die Schneeflocke mit Kreisen mit unterschiedlichen Radien dar)

var Snow = function(){}
Snow.prototype = {
　　init : function(){},
　　draw : function( cxt ) {},
　　update : function(){}
}

Fügen Sie dann diese Zufallsfunktion zu init hinzu Schließen Sie die Initialisierung der Schneeflocken ab

1. Wenn Schneeflocken herauskommen, werden sie normalerweise oben auf dem Bildschirm angezeigt, sodass die y-Koordinaten der Schneeflocken alle 0 sind. Zweitens sind die x-Koordinaten der Schneeflocken zufällig. und ihr Bereich beträgt von links nach rechts auf dem Bildschirm 0 ~ Breite. Diese Breite ist die Breite der Leinwand, also die Breite des Browsers

2, und der Radius r des Schneeflocke ist auf einen beliebigen Wert zwischen 1 und 5 eingestellt.

function random(min, max) {
                return Math.random() * (max - min) + min;
            }
            init: function () {
                    this.x = random(0, width);
                    this.y = 0;
                    this.r = random(1, 5);
                    this.vy = random(3, 5);
                }

3 Die Fallgeschwindigkeit der Schneeflocken ist auf eine zufällige Geschwindigkeit zwischen 3 und 5 eingestellt. Der Schnee, den ich hier gemacht habe, fällt vertikal. Sie können den Einfluss erweitern und berücksichtigen des Windes (diesmal muss es eine horizontale Richtung geben) Geschwindigkeit)

Mit diesen Initialisierungsparametern verbessern wir die Zeichenmethode und zeichnen Schneeflocken:

Der Parameter cxt ist der Kontext des Diese Funktion ist sehr einfach. Der in init festgelegte Wert wird verwendet, um einen Kreis (Schneeflocke) zu zeichnen. Es aktualisiert die Geschwindigkeit der Schneeflocken in vertikaler Richtung

Bei der Aktualisierungsmethode treffen wir eine Grenzbeurteilung: Wenn die Schneeflocken nach unten fallen, werden sie definitiv verschwinden. Was tun, wenn die Grenze nicht erreicht wird?

draw: function (cxt) {
                    cxt.beginPath();
                    cxt.fillStyle = 'white';
                    cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
                    cxt.fill();
                    cxt.closePath();
                    this.update(cxt);
                },

Die Höhe der Leinwand minus dem Radius der Schneeflocke. Dies ist die Grenze, wenn die Schneeflocke im Begriff ist zu verschwinden, also this.y < height - this.r Wenn diese Bedingung wahr ist, bedeutet dies, dass Die Schneeflocke schwebte und wir müssen die Position der Schneeflocke in y-Richtung aktualisieren. Die Schneeflocke sieht aus wie („es schneit“). Wenn eine Schneeflocke im Begriff ist zu verschwinden, verschieben wir sie in die Ausgangsposition. so dass es so aussieht, als würde es kontinuierlich im Kreis schneien, ohne die Schneeflocken neu zu zeichnen (wenn Sie dies tun, wird dies definitiv die Leistung beeinträchtigen und dieser Spezialeffekt wird am Ende definitiv hängen bleiben. Dieser kleine Trick wird von vielen ähnlichen verwendet Spezialeffekte). Zu diesem Zeitpunkt ist der Kernprozess abgeschlossen. Als nächstes werden wir eine große Anzahl von Schneeflocken erzeugen.

update: function (cxt) {
                    if (this.y < height - this.r) {
                        this.y += this.vy;
                    } else {
                        this.init();
                    }
                }

Generieren Sie 500 Schneeflocken, nicht gleichzeitig, und speichern Sie diese Schneeflocken dann im Array Schnee.

Starten Sie dann den Timer und lassen Sie die Schneeflocken weiter fallen,

Bezüglich der Verwendung von requestAnimationFrame können Sie sich auf diesen Artikel von mir beziehen: [JS Master's Road] HTML5s neuer Timer-RequestAnimationFrame-tatsächlicher Fortschrittsbalken

var snow = [];
            for (var i = 0; i < 500; i++) {
                setTimeout(function () {
                    var oSnow = new Snow();
                    oSnow.init();
                    snow.push(oSnow);
                }, 10 * i);
            }

Vollständiger Democode:

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Schneeeffekt in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!