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>