canvas粒子效果-snow 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             body{
 8                 margin: 0;
 9                 padding: 0;
10                 background:rgba(0,0,0,1);
11             }
12         </style>
13     </head>
14     <body>
15         <canvas id="canvas"></canvas>
16         <script type="text/javascript">
17             var canvas = document.getElementById("canvas");
18             var ctx = canvas.getContext('2d');
19             canvas.width = window.innerWidth;
20             canvas.height = window.innerHeight;
21             w = window.innerWidth;
22             h = window.innerHeight;
23             var max = 100;
24             var par = [];
25             ctx.lineWidth = 2;
26             for( var i = 0 ;i < max ; i++ ){
27                 par.push({
28                     xs:Math.random()*w,
29                     ys:Math.random()*h,
30                     xc:-2+Math.random()*4,
31                     yc:Math.random()*5+2
32                 })
33             }
34             var draw = function(){
35                 ctx.clearRect(0,0,w,h);
36                 for( var j = 0; j < par.length; j++ ){
37                     var p = par[j];
38                     ctx.beginPath();
39                     ctx.moveTo(p.xs,p.ys);
40                     ctx.lineTo(p.xs+p.xc,p.ys+p.yc);
41                     ctx.stroke();
42                     ctx.strokeStyle = "rgba(174,194,224,.5)";
43                     p.xs += p.xc;
44                     p.ys +=p.yc;
45                     if( p.xs>w||p.ys>h){
46                         p.xs = Math.random()*w;
47                         p.ys =-20;
48                     }    
49                 }
50                 requestAnimationFrame(draw);
51             }
52 //            draw();
53 //            setInterval(function(){
54 //                draw();
55 //            },40)
56             requestAnimationFrame(draw);
57         </script>
58     </body>
59 </html>

 

posted @ 2016-10-19 20:26  郑福坤  阅读(536)  评论(0)    收藏  举报