Comment utiliser le canevas HTML5 pour faire tomber des flocons de neige

Cet article présente principalement le canevas HTML5 pour obtenir l'effet spécial de la chute des flocons de neige en détail. L'effet permet d'obtenir un effet d'animation fascinant et réaliste. Les amis intéressés peuvent se référer à

J'ai vu de nombreux affichages de HTML5 sur. L'effet des flocons de neige volants est en effet très fascinant. Je crois que tout le monde est aussi excité que moi lorsqu'il le regarde. Ils sont également curieux et veulent étudier comment implémenter le code, bien que ces codes sources puissent être téléchargés à partir de nombreux endroits. , je ne sais pas si quelqu'un d'autre a fait cela. Analyse des idées et des difficultés de l'animation de type animation.

Il m'est arrivé d'étudier beaucoup ces jours-ci, et j'ai profité du temps présent pour le décortiquer étape par étape de l'analyse de la demande, des points de connaissances et de la programmation si j'essaie de me ridiculiser. devant vous, s'il vous plaît, ne riez pas.

Le rendu final est le suivant :

Figure 1

Analyse de la demande

1. Flocons de neige ronds

Dans cet exemple, la forme des flocons de neige est ronde

2. Le nombre de flocons de neige est fixe

D'après la figure 1, observez attentivement le nombre de flocons de neige blancs. Pendant le processus de chute, le nombre de flocons de neige sur l'image doit être fixé. Cette exigence doit être obtenue grâce à notre observation et à notre analyse. Cela correspond à la scène que nous voyons dans la vraie vie où des flocons de neige volent partout dans le ciel.

3. Les tailles des flocons de neige sont incohérentes

Chaque flocon de neige a une taille différente, ce qui signifie que le rayon du flocon de neige est aléatoire. Cela concorde également avec la scène où l’on voit des flocons de neige voler partout dans le ciel dans la vraie vie.

4. La position des flocons de neige bouge

Les flocons de neige tombent, et naturellement leurs positions bougent également.

2. Points de connaissance

1. Utilisez Html5 Canvas+JavaScript pour dessiner un cercle - formant un flocon de neige circulaire

En Html5, vous devez utilisez Canvas En même temps, dessinez un cercle avec JavaScript pour former un flocon de neige circulaire — arc(x,y,r,start,stop);

2 Nombres aléatoires — générez des flocons de neige circulaires avec différents rayons et coordonnées.

Dans cet exemple, lorsque la page Web est chargée pour la première fois, un certain nombre de flocons de neige avec des rayons et des positions différents doivent être générés, donc le rayon et les coordonnées sont des nombres aléatoires pendant que les flocons de neige tombent ; , leur rayon reste inchangé et leurs coordonnées changent dans une certaine plage, donc les coordonnées sont également des nombres aléatoires à ce moment - Math.random()

Programmation

1. Préparation

Mettez une toile et définissez la couleur de fond de tout le corps sur noir

Code HTML :

<canvas id="mycanvas">
    您的浏览器不支持canvas画布   
</canvas>

CSS code :

* {   
    margin: 0;   
    padding: 0;   
}   
#mycanvas {   
    background: black;   
}

L'effet est le suivant Comme suit :

Remarque : la toile a une hauteur et une largeur initialisées par défaut, vous ne

2. Le canevas s'affiche en plein écran

Le code JavaScript est le suivant :

//获取mycanvas画布   
    var can = document.getElementById("mycanvas");   
    var ctx = can.getContext("2d");   
    //画布宽度   
    var wid = window.innerWidth;   
    //画布高度   
    var hei = window.innerHeight;   
    can.width=wid;   
    can.height=hei;

Le L'effet est le suivant :

3. Génération d'initialisation Nombre fixe de flocons de neige

Selon notre analyse de la demande ci-dessus et notre interprétation des connaissances. points, tout d'abord, le nombre de flocons de neige est fixe, nous devons donc définir une variable var snow = 100 ; ici nous supposons que le nombre de flocons de neige est de 100,

Lors de la génération des flocons de neige, le rayon et la position de chaque flocon de neige est différente. Nous considérons chaque flocon de neige comme un objet, alors les propriétés de cet objet incluent : le rayon, les coordonnées (X, Y), puis un objet flocon de neige. Il peut s'écrire comme var snowOject={x:1,y :10,r:5}, qui représente un flocon de neige circulaire avec des coordonnées (1,10) et un rayon de 5 dans cet exemple, puisque le rayon et les coordonnées sont des nombres aléatoires. Par conséquent, Math.random() est utilisé pour générer le rayon ; et les coordonnées (X, Y) pour 100 flocons de neige respectivement ;

Ensuite, nous avons ici 100 flocons de neige, donc afin de faciliter les opérations ultérieures, nous utilisons un tableau pour enregistrer ces 100 objets Flocon de neige.

Le code JavaScript est le suivant :

//雪花数目   
var snow = 100;   
//雪花坐标、半径   
var arr = []; //保存各圆坐标及半径   
for (var i = 0; i < snow; i++) {   
arr.push({   
x: Math.random() * wid,   
y: Math.random() * hei,   
r: Math.random() * 10 + 1   
})   
}

4. Dessinez des flocons de neige

Ci-dessus, nous avons ajouté 100 rayons et coordonnées de flocon de neige (X, Y) Générer, la suite consiste à utiliser canvas pour dessiner des flocons de neige (ici, dessiner des cercles), définir une fonction

Le code JavaScript est le suivant :

//画雪花   
function DrawSnow() {   
    ctx.fillStyle="white";   
    ctx.beginPath();   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        ctx.moveTo(p.x,p.y);   
        ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);   
    }   
    ctx.fill();   
  
    ctx.closePath();

puis appeler le DrawSnow (), l'effet est le suivant :

Vous pouvez essayer d'actualiser la page Web plusieurs fois pour voir si des flocons de neige de différentes tailles et positions seront générés ( normalement c'est possible), et vous en êtes proche. L'effet final est

Remarque : Comme 100 cercles doivent être dessinés ici, les coordonnées de début du dessin sont redéfinies à chaque fois qu'un cercle est dessiné : ctx.moveTo. (p.x,p.y); sinon, des effets étranges se produiront. Si vous n'y croyez pas, vous pouvez l'essayer

5. Des flocons de neige flottants

Nous avons dessiné 100 flocons de neige ci-dessus Malheureusement, nous ne pouvons voir l'effet changeant qu'en actualisant la page Web, mais nous devons y parvenir. Le fait est que les flocons de neige continuent de bouger.

Nous devons d'abord utiliser la fonction setInterval pour redessiner continuellement les flocons de neige. L'intervalle ici est de 50 millisecondes : setInterval(DrawSnow,50);

同时每一朵雪花的坐标（X、Y）需要不停的改变（在一定幅度内），我们这里的雪花是从左上方飘落到右下方，所以每朵X、Y坐标值都在不停的增大，那我们用一个函数SnowFall()定义雪花飘过规则

该函数代码如下：

//雪花飘落   
function SnowFall() {   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        p.y += Math.random() * 2 + 1;   
        if (p.y > hei) {   
            p.y = 0;   
        }   
        p.x += Math.random() * 2 + 1;   
        if (p.x > wid) {   
            p.x = 0;   
    <span style="white-space:pre">    </span>}   
    }   
}

然后将该函数放入DrawSnow()执行，注意：我们每隔50毫毛重画雪花，必须擦除画布，所以DrawSnow()函数体内必须在前面执行clearRect()函数，即：ctx.clearRect(0, 0, wid, hei);

此时DrawSnow函数定义如下：

//画雪花   
function DrawSnow() {   
    ctx.clearRect(0, 0, wid, hei);   
    ctx.fillStyle = "white";   
    ctx.beginPath();   
    for (var i = 0; i < snow; i++) {   
        var p = arr[i];   
        ctx.moveTo(p.x, p.y);   
        ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
    }   
    ctx.fill();   
    SnowFall();   
    ctx.closePath();   
}

最后执行setInterval(DrawSnow, 50); 

OK，经过我们上述步骤，小伙伴们是否已经对整个过程及技术实现很清晰了。

完整代码如下（大家可以直接复制到自己项目中执行，测试下效果）：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script src="js/jquery-1.8.3.min.js"></script>  
        <style type="text/css">  
            * {   
                margin: 0;   
                padding: 0;   
            }   
               
            #mycanvas {   
                background: black;   
            }   
        </style>  
    </head>  
  
    <body>  
        <canvas id="mycanvas">  
            您的浏览器不支持canvas画布   
        </canvas>  
        <script>  
            //获取mycanvas画布   
            var can = document.getElementById("mycanvas");   
            var ctx = can.getContext("2d");   
            //画布宽度   
            var wid = window.innerWidth;   
            //画布高度   
            var hei = window.innerHeight;   
            can.width = wid;   
            can.height = hei;   
            //雪花数目   
            var snow = 100;   
            //雪花坐标、半径   
            var arr = []; //保存各圆坐标及半径   
            for (var i = 0; i < snow; i++) {   
                arr.push({   
                    x: Math.random() * wid,   
                    y: Math.random() * hei,   
                    r: Math.random() * 10 + 1   
                })   
            }   
            //画雪花   
            function DrawSnow() {   
                ctx.clearRect(0, 0, wid, hei);   
                ctx.fillStyle = "white";   
                ctx.beginPath();   
                for (var i = 0; i < snow; i++) {   
                    var p = arr[i];   
                    ctx.moveTo(p.x, p.y);   
                    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
                }   
                ctx.fill();   
                SnowFall();   
                ctx.closePath();   
            }   
            //雪花飘落   
            function SnowFall() {   
                for (var i = 0; i < snow; i++) {   
                    var p = arr[i];   
                    p.y += Math.random() * 2 + 1;   
                    if (p.y > hei) {   
                        p.y = 0;   
                    }   
                    p.x += Math.random() * 2 + 1;   
                    if (p.x > wid) {   
                        p.x = 0;   
                    }   
                }   
            }   
            setInterval(DrawSnow, 50);   
        </script>  
    </body>  
  
</html>

好了，今天分享就到这里，希望对大家的学习有所帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何在canvas里面基于随机点绘制一个多边形

用HTML5 Canvas来绘制三角形和矩形等多边形的方法

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!