Comment obtenir un effet de neige en HTML5-tutoriel HTML-php.cn

Comment obtenir un effet de neige en HTML5

一个新手

Libérer： 2018-05-17 16:14:23

original

8831 Les gens l'ont consulté

Utilisez la toile pour obtenir un effet de neige. Commençons par prévisualiser l'effet :

Analysons d'abord cet effet :

1, générer des flocons de neige de manière aléatoire

2 , les flocons de neige. ne sont pas produits en même temps, mais en séquence

3. Comment exprimez-vous les flocons de neige

4 Comment neige-t-il continuellement

5. ? Après avoir un peu

compris les problèmes ci-dessus, cet effet a été essentiellement réalisé

Tout d'abord, puisqu'il s'agit d'un effet plein écran, j'ai utilisé un canevas créé dynamiquement. afficher l'intégralité de la navigation Attribuez la largeur et la hauteur du navigateur à canvas

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

Copier après la connexion

Après avoir appelé la méthode init de l'objet oCanvas, un canevas sera ajouté à la fin du corps. id est une toile, et la largeur et la hauteur sont les mêmes que celles du navigateur. La largeur et la hauteur sont les mêmes, le fond est noir, l'effet de la neige la nuit

Ensuite, il y a une scène, c'est l'heure pour les comédiens de monter sur scène, comment réaliser des flocons de neige ? Ici, les opérations liées à la neige sont encapsulées dans une classe. Sa structure de base est la suivante :

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

Copier après la connexion

Cette classe a un total de trois méthodes (init, draw, update).

init : Initialise la position du flocon de neige (coordonnées x, y), la vitesse, le rayon (la taille du flocon de neige, ici nous représentons le flocon de neige avec des cercles de rayons différents)

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);
                }

Copier après la connexion

Puis ajoutez cette fonction aléatoire à init Terminez l'initialisation des flocons de neige

1. Lorsque les flocons de neige sortent, ils apparaissent généralement en haut de l'écran, donc les coordonnées y des flocons de neige sont toutes 0. Deuxièmement, les coordonnées x des flocons de neige sont aléatoires, et leur plage est De gauche à droite de l'écran, elle est de 0 ~ width Cette largeur est la largeur du canevas, qui est la largeur du navigateur

2, et le rayon r du. le flocon de neige est réglé sur n'importe quelle valeur entre 1 et 5

3. La vitesse de chute des flocons de neige est réglée sur une vitesse aléatoire entre 3 et 5. La neige que j'ai faite ici tombe verticalement. Vous pouvez développer et considérer l'influence. du vent (cette fois il doit y avoir une direction horizontale) Vitesse)

Avec ces paramètres d'initialisation, nous améliorons la méthode de dessin et dessinons des flocons de neige :

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

Copier après la connexion

Le paramètre cxt est le contexte du canvas. Cette fonction est très simple, juste un appel de méthode arc. La valeur définie dans init est utilisée pour dessiner un cercle (flocon de neige). À la fin de cette méthode, une méthode de mise à jour est appelée. Il met à jour la vitesse des flocons de neige dans la direction verticale

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

Copier après la connexion

Dans la méthode de mise à jour, nous effectuons un jugement limite : lorsque les flocons de neige tombent vers le bas, ils disparaîtront définitivement. Que faire après leur disparition ? Que faire si la frontière n'est pas atteinte ?

La hauteur de la toile moins le rayon du flocon de neige. C'est la limite lorsque le flocon de neige est sur le point de disparaître, donc this.y < le flocon de neige a flotté, et nous le ferons. Nous devons mettre à jour la position du flocon de neige dans la direction y. Le flocon de neige ressemble à (« il neige »). Lorsqu'un flocon de neige est sur le point de disparaître, nous le déplaçons vers la position initiale, pour donner l'impression qu'il neige continuellement en cercle, sans redessiner les flocons de neige (si vous faites cela, cela affectera certainement les performances, et cet effet spécial sera définitivement bloqué à la fin. Cette petite astuce est utilisée par de nombreux similaires. effets spéciaux). À ce stade, le processus principal est terminé. Ensuite, nous allons générer un grand nombre de flocons de neige.

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

Copier après la connexion

Générez 500 flocons de neige, pas en même temps, puis enregistrez ces flocons de neige dans le tableau de neige.

Ensuite, démarrez le chronomètre et laissez les flocons de neige continuer à tomber,

Concernant l'utilisation de requestAnimationFrame, vous pouvez vous référer à mon article : [JS Master's Road] La nouvelle barre de progression réelle du timer requestAnimationFrame de HTML5

(function move() {
                oGc.clearRect(0, 0, width, height);
                for (var i = 0; i < snow.length; i++) {
                    snow[i].draw(oGc);
                }
                requestAnimationFrame(move);
            })();

Copier après la connexion

Code de démonstration complet :


    
    
    
    雪花效果 - by ghostwu
    
    




    <script>
        window.onload = function () {
            var Canvas = function (w, h) {
                this.width = w;
                this.height = h;
            }
            Canvas.prototype = {
                init: function () {
                    var oC = document.createElement(&quot;canvas&quot;);
                    oC.setAttribute(&amp;#39;width&amp;#39;, this.width);
                    oC.setAttribute(&amp;#39;height&amp;#39;, this.height);
                    oC.setAttribute(&amp;#39;id&amp;#39;, &amp;#39;canvas&amp;#39;);
                    oC.style.backgroundColor = &amp;#39;#000&amp;#39;;
                    document.body.appendChild(oC);
                }
            }
            var curWinWidth = window.innerWidth,
                curWinHeight = window.innerHeight;
            var oCanvas = new Canvas(curWinWidth, curWinHeight);
            oCanvas.init();

            var oC = document.querySelector(&#39;#canvas&#39;);
            var width = oC.width, height = oC.height, oGc = oC.getContext(&#39;2d&#39;);

            function random(min, max) {
                return Math.random() * (max - min) + min;
            }
            var Snow = function () {

            }
            Snow.prototype = {
                init: function () {
                    this.x = random(0, width);
                    this.y = 0;
                    this.r = random(1, 5);
                    this.vy = random(3, 5);
                },
                draw: function (cxt) {
                    cxt.beginPath();
                    cxt.fillStyle = &amp;#39;white&amp;#39;;
                    cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
                    cxt.fill();
                    cxt.closePath();
                    this.update(cxt);
                },
                update: function (cxt) {
                    if (this.y &lt; height - this.r) {
                        this.y += this.vy;
                    } else {
                        this.init();
                    }
                }
            }

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

            (function move() {
                oGc.clearRect(0, 0, width, height);
                for (var i = 0; i &lt; snow.length; i++) {
                    snow[i].draw(oGc);
                }
                requestAnimationFrame(move);
            })();
        }
    </script>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!