Exemple d'implémentation de l'effet de neige volante basé sur les compétences du didacticiel html5 canvas_html5

L'exemple de cet article décrit comment obtenir l'effet de neige basé sur un canevas HTML5. Vous pouvez voir un superbe effet de neige en exécutant cet exemple. Comme indiqué ci-dessous :

Le code principal est le suivant :

Copier le code Le code est le suivant : http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> 漫天飞雪 * {marge : 0 ; remplissage : 0;}

body { /*Vous pouvez utiliser n'importe quel type d'arrière-plan ici.*/ background : #6b92b9; } canvas { display: block; }

window.onload = function(){ //canvas init var canvas = document.getElementById("canvas"); var ctx = canvas.getContext ("2d");

//dimensions du canevas var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canevas. height = H;

//particules de flocon de neige var mp = 3000; //max particules var particules = []; for(var i = 0; i { particules.push({ x: Math.random ()*W, //coordonnée x y : Math.random()*H, //coordonnée y r : Math.random()*3 1, //rayon d : Math.random()*mp //densité }) }

//Dessinons les flocons fonction draw() { ctx.clearRect(0 , 0, W, H);

ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; /* ctx.fillStyle = "#FF0000";*/ ctx.beginPath(); for(var i = 0; i { var p = particules[i]; ctx.moveTo(p.x, p.y); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); } ctx.fill(); update(); }

//Fonction pour déplacer les flocons de neige //l'angle sera un indicateur incrémentiel continu. Des fonctions Sin et Cos lui seront appliquées pour créer des mouvements verticaux et horizontaux des flocons var angle = 0; function update() { angle = 0.01; for(var i = 0; i { var p = particules[i]; //Mise à jour des coordonnées X et Y //Nous ajouterons 1 à la fonction cos évitez les valeurs négatives qui amèneront les flocons à se déplacer vers le haut //Chaque particule a sa propre densité qui peut être utilisée pour rendre le mouvement vers le bas différent pour chaque flocon //Rendons-le plus aléatoire en ajoutant le rayon p.y = Math.cos(angle p.d) 1 p.r/2; p.x = Math.sin(angle) * 2;

//Envoi des flocons par le haut à la sortie // Rendons-le un peu plus organique et laissons les flocons entrer également par la gauche et la droite. if(p.x > W || p.x H) { if (i%3 > 0) //66,67% des flocons { particules[i] = {x : Math.random()*W, y : -10, r : p.r, d : p.d }; } else { //Si le flocon sort par la droite if(Math.sin(angle) > 0) { //Entrez à partir des particules[i] = {x : -5, y : Math.random()*H, r : p.r, d : p.d}; } else { //Entrez par la droite particules[i] = {x : W 5, y : Math.random()*H, r : p.r, d : p.d} ;

代码分析如下：

这行代码改变雪花半径大小：

复制代码

代码如下 :

r: Math.random()*3 1, //radius 這行程式碼改變雪花下落速度：

複製程式碼 程式碼如下: setInterval(draw, 15); 這行值改變雪花密度：

複製程式碼 程式碼如下: var mp = 30000>代碼如下: var mp = 300004 maxicles; 相信本文所述對大家的html5 WEB程式設計有一定的借鏡價值。