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 codeLe code est le suivant : http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">漫天飞雪 <br>* {marge : 0 ; remplissage : 0;}</p> <p>body {<br> /*Vous pouvez utiliser n'importe quel type d'arrière-plan ici.*/<br> background : #6b92b9;<br>}<br>canvas {<br> display: block;<br>} <br> < /toile> <br>window.onload = function(){<br> //canvas init<br> var canvas = document.getElementById("canvas");<br> var ctx = canvas.getContext ("2d");<br> <br> //dimensions du canevas<br> var W = window.innerWidth;<br> var H = window.innerHeight;<br> canvas.width = W;<br> canevas. height = H;<br> <br> //particules de flocon de neige<br> var mp = 3000; //max particules<br> var particules = [];<br> for(var i = 0; i < mp; i )<br /> {<br /> particules.push({<br /> x: Math.random ()*W, //coordonnée x<br /> y : Math.random()*H, //coordonnée y<br /> r : Math.random()*3 1, //rayon<br /> d : Math.random()*mp //densité<br /> })<br /> }<br /> <br /> //Dessinons les flocons<br /> fonction draw()<br /> {<br /> ctx.clearRect(0 , 0, W, H);<br /> <br /> ctx.fillStyle = "rgba(255, 255, 255, 0.8)";<br /> /* ctx.fillStyle = "#FF0000";*/<br /> ctx.beginPath();<br /> for(var i = 0; i < mp; i )<br /> {<br /> var p = particules[i];<br /> ctx.moveTo(p.x, p.y); <br /> ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);<br /> }<br /> ctx.fill();<br /> update();<br /> }<br /> <br /> //Fonction pour déplacer les flocons de neige<br /> //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<br /> var angle = 0;<br /> function update()<br /> {<br /> angle = 0.01;<br /> for(var i = 0; i < mp; i )<br /> {<br /> var p = particules[i];<br /> //Mise à jour des coordonnées X et Y<br /> //Nous ajouterons 1 à la fonction cos évitez les valeurs négatives qui amèneront les flocons à se déplacer vers le haut<br /> //Chaque particule a sa propre densité qui peut être utilisée pour rendre le mouvement vers le bas différent pour chaque flocon<br /> //Rendons-le plus aléatoire en ajoutant le rayon<br /> p.y = Math.cos(angle p.d) 1 p.r/2;<br /> p.x = Math.sin(angle) * 2;<br /> <br /> //Envoi des flocons par le haut à la sortie<br /> // Rendons-le un peu plus organique et laissons les flocons entrer également par la gauche et la droite.<br /> if(p.x > W || p.x < 0 || p.y > H)<br> {<br> if (i%3 > 0) //66,67% des flocons<br> {<br> particules[i] = {x : Math.random()*W, y : -10, r : p.r, d : p.d };<br> }<br> else<br> {<br> //Si le flocon sort par la droite<br> if(Math.sin(angle) > 0)<br> {<br> //Entrez à partir des<br> particules[i] = {x : -5, y : Math.random()*H, r : p.r, d : p.d};<br> } <br> else<br> {<br> //Entrez par la droite<br> particules[i] = {x : W 5, y : Math.random()*H, r : p.r, d : p.d} ; < script><br></body><br></html><br><br> <br>代码分析如下：<br> <br>这行代码改变雪花半径大小：<br> <br><br><br><br> </div>复制代码<p></p> <p>代码如下 :</p> <div class="msgborder" id="phpcode69">r: Math.random()*3 1, //radius</div> <p>這行程式碼改變雪花下落速度：</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode70'));"><u>複製程式碼</u></span></div>程式碼如下:</div> <div class="msgborder" id="phpcode70">setInterval(draw, 15); </div>這行值改變雪花密度： <p></p> <p><br></p> <div class="msgheader"> <div class="right">複製程式碼<span style="CURSOR: pointer" onclick="copycode(getid('phpcode71'));"><u></u>程式碼如下:</span> </div>var mp = 30000>代碼如下:</div> <div class="msgborder" id="phpcode71">var mp = 300004 maxicles; </div> 相信本文所述對大家的html5 WEB程式設計有一定的借鏡價值。 <p></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
