利用html5实现的飞雪效果代码实例-优快云博客

本文提供了一段使用HTML5实现的漫天飞雪效果代码实例。通过简单的代码即可在网页上展示出逼真的雪花飘落场景，适用于冬季主题网站或个人主页的装饰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本章节分享一段代码实例，它利用html5实现了漫天飞雪的效果。

有需要的朋友可以做一下参考，代码其实也非常的简单，这里就不多介绍了。

代码如下:

       <!DOCTYPE html>
      
       <
       html
       > 
      
       <
       head
       > 
      
       <
       meta 
       charset
       =
       " utf-8"
       > 
      
       <
       meta 
       name
       =
       "author" 
       content
       =
       "http://www.softwhy.com/" 
       /> 
      
       <
       title
       >蚂蚁部落</
       title
       > 
      
       <
       style 
       type
       =
       "text/css"
       > 
      
       * { 
      
       margin: 0; 
      
       padding: 0; 
      
       } 
      
       body { 
      
       background: #6b92b9; 
      
       } 
      
       canvas { 
      
       display: block; 
      
       } 
      
       </
       style
       > 
      
       </
       head
       > 
      
       <
       body
       > 
      
       <
       div 
       style
       =
       "background:#6b92b9; width:100%;height:2000px;"
       ></
       div
       > 
      
       <
       canvas 
       id
       =
       "canvas" 
       style
       =
       "position:fixed;top:0px;left:0px;pointer-events:none;"
       ></
       canvas
       > 
      
       <
       script 
       type
       =
       "text/javascript"
       > 
      
       window.onload=function(){
      
       //canvas init 
      
       var canvas=document.getElementById("canvas"); 
      
       var ctx=canvas.getContext("2d"); 
      
       //canvas dimensions 
      
       var W=window.innerWidth; 
      
       var H=window.innerHeight; 
      
       canvas.width=W; 
      
       canvas.height=H; 
      
       //snowflake particles 
      
       var mp = 3000; //max particles 
      
       var particles = []; 
      
       for(var i = 0; i < 
       mp
       ; i++){ 
      
       particles.push({ 
      
       x: Math.random()*W, //x-coordinate 
      
       y: Math.random()*H, //y-coordinate 
      
       r: Math.random()*3+1, //radius 
      
       d: Math.random()*mp //density 
      
       }) 
      
       } 
      
       //Lets draw the flakes 
      
       function 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 < mp; i++){ 
      
       var 
       p 
       = 
       particles
       [i]; 
      
       ctx.moveTo(p.x, p.y); 
      
       ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); 
      
       } 
      
       ctx.fill(); 
      
       update(); 
      
       } 
      
       //Function to move the snowflakes 
      
       var 
       angle 
       = 
       0
       ; 
      
       function update(){ 
      
       angle += 0.01; 
      
       for(var 
       i 
       = 
       0
       ; i < mp; i++){ 
      
       var 
       p 
       = 
       particle
       [i]; 
      
       p.y += Math.cos(angle+p.d) + 1 + p.r/2; 
      
       p.x += Math.sin(angle) * 2; 
      
       if(p.x > W || p.x < 
       0 
       || p.y > H){ 
      
       if(i%3 > 0){ 
      
       particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; 
      
       } 
      
       else{ 
      
       if(Math.sin(angle) > 0){ 
      
       particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; 
      
       } 
      
       else{ 
      
       particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; 
      
       } 
      
       } 
      
       } 
      
       } 
      
       } 
      
       setInterval(draw, 15); 
      
       }
      
       </
       script
       > 
      
       </
       body
       > 
      
       </
       html
       >