canvas实现雪花随机动态飘落效果（代码示例）

互联网 20-6-17

本篇文章给大家介绍一下使用canvas实现雪花随机动态飘落效果的方法，文中示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

用canvas实现雪花随机动态飘落，代码如下

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title> </head> <style>   body{     margin: 0;     padding: 0;   }   canvas{     background: #000;   } </style> <body>   <canvas id = "snow">    </canvas>   <script>     var canvas = document.getElementById('snow');     var context = canvas.getContext('2d');     // 获得可视区的宽高     canvas.width = window.innerWidth;     canvas.height = window.innerHeight;     function snow(){       context.save();       // 开启路径       context.beginPath();       // 移动画布，确定雪花终点为中心点       context.translate(100,100);       //起点       context.moveTo(-20,0);       // 终点       context.lineTo(20,0);       // 线变成白色       context.strokeStyle = '#fff';       // 线变粗       context.lineWidth = 10;       // 线变圆头       context.lineCap = 'round';       context.stroke();       // 角度转弧度       var disX = Math.sin(30*Math.PI/180)*20;       var disY = Math.sin(60*Math.PI/180)*20;       // 画第二条线，左下到右上的线       context.moveTo(-disX,disY);       context.lineTo(disX,-disY);       // 画第三条线       context.moveTo(-disX,-disY);       context.lineTo(disX,disY);       context.stroke();       context.restore();     }     // snow();     //生成雪花的构造函数     function Snow(x,y,scale,rotate,speedX,speedY,speedR){            this.x = x;            this.y = y;            this.scale = scale;            this.rotate = rotate;            this.speedX = speedX;            this.speedY = speedY;            this.speedR = speedR;           // 渲染雪花           this.render = function(){             context.save();             context.beginPath();             context.translate(this.x,this.y);             context.scale(this.scale,this.scale);             context.rotate(this.rotate*Math.PI/180);             context.moveTo(-20,0);             context.lineTo(20,0);             context.strokeStyle = '#fff';             context.lineWidth = 10;             context.lineCap = 'round';             context.stroke();             var disX = Math.sin(30*Math.PI/180)*20;             var disY = Math.sin(60*Math.PI/180)*20;             context.moveTo(-disX,disY);             context.lineTo(disX,-disY);             context.moveTo(-disX,-disY);             context.lineTo(disX,disY);             context.stroke();             context.restore();            }      }     // var snow = new Snow(50,50,1,10,10,10,10);     // snow.render();     // 存储所有生成的雪花     var snowArray = [];     // 生成雪花       function init(){         var len = 100;         for(var i = 0;i<len;i++){           var x = Math.random()*canvas.width;           var scale = Math.random()+0.5;           var rotate = Math.random()*60;           var speedX = Math.random()+1           var speedY = Math.random()+5;           var speedR = Math.random()*4+2;           // var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);           // snow.render();           (function(x,y,scale,rotate,speedX,speedY,speedR){             setTimeout(function(){             var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR);             snow.render();             snowArray.push(snow);           },Math.random()*8000);              })(x,0,scale,rotate,speedX,speedY,speedR);       }snowing();     }init();       // 动起来       function snowing(){         setInterval(function(){           //先清除           context.clearRect(0,0,canvas.width,canvas.height);           for(var i = 0;i < snowArray.length;i++){             snowArray[i].x = (snowArray[i].x+snowArray[i].speedX)%canvas.width;             snowArray[i].y = (snowArray[i].y+snowArray[i].speedY)%canvas.height;             snowArray[i].rotate = (snowArray[i].rotate+snowArray[i].speedR)%60;             snowArray[i].render();           }         },30);       }          /**      * sin60 = 对边/斜边 =>  对边 = sin60*斜边  =>  y=sin60*半径（r）；      */   </script> </body> </html>