这个就是canvas做的雨滴效果
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>canvas雨滴demo</title> <meta name="description" content="An example from the book, 'Responsive Web Design with HTML5 and CSS3' by Ben Frain"> <meta name="viewport" content="width=device-width"> <meta name="theme-color" content="#ff9900"> <style> *{margin:0;padding:0;} #canvas{ background-color:#000; display:block;} </style> </head> <body> <canvas id="canvas"></canvas> <script> //获得canvas标签 var can = document.getElementById("canvas"); //创建绘图环境 var ctx = can.getContext("2d"); //设置canvas的宽高为 页面的宽高 var w = can.width = window.innerWidth; var h = can.height = window.innerHeight; var counts = 30; //设置雨滴的数量 var drops = []; //设置drops数组存储雨滴 //设置响应式改变页面宽高canvas宽高也随之改变 window.onresize = function(){ var w = can.width = window.innerWidth; var h = can.height = window.innerHeight; } //构造雨滴类 function Drop(){} //为雨滴类原型添加方法 Drop.prototype = { //初始化雨滴方法 init:function(){ this.x = Math.random()*w;//创建一个在x轴上的随机数 this.y = 0; //y轴初始化为0 this.vy = Math.random()*2 + 4;//创建一个y轴的随机速度 this.l = Math.random()*0.1*h + 0.8*h;//在0.8h到0.9h之间设置一个随机数 this.r = 1; //初始化圆形半径 this.vr = 1; //初始化半径的变化系数 this.a = 1; //圆形初始化透明度 this.va = 0.96 ; //透明度更新系数 }, //绘制方法 draw:function(){ if( this.y < this.l ){//如果y轴的高度 小于 l ctx.beginPath();//开始绘制 ctx.fillStyle = color(this.a);//填充颜色 ctx.fillRect(this.x,this.y,2,10);//绘制矩形 //ctx.strokeStyle = "red";//边框颜色 //ctx.strokeRect(200,50,20,30);//绘制空心矩形 }else{ ctx.beginPath();//开始绘制 ctx.strokeStyle = "rgba(0,255,255,"+this.a+")";//填充颜色 ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);//绘制圆形 ctx.stroke();//绘制空心圆 } this.update(); }, //y轴移动方法 update:function(){ if(this.y < this.l){//如果y轴的高度 小于 l this.y += this.vy; //在y轴上加一个速度 }else{ if( this.a > 0.03){ //透明度大于0.03 this.r += this.vr;//更新圆形半径 if(this.r >50){//如果当圆形半径大于50时就让它消失 this.a *= this.va;//更改透明度 } }else{//雨滴消失就初始化 this.init();//初始化雨滴 } } } } //var drop = new Drop(); //drop.init();//初始化方法 //drop.draw();//绘制方法 //设置定时器来执行绘制方法 //递归调用雨滴移动方法 function move(){ //ctx.clearRect(0,0,w,h);//清空画布 对整个画布重新绘制空白的图形 ctx.fillStyle = "rgba(0,0,0,.1)";//矩形透明度 ctx.fillRect(0,0,w,h);//绘制一个透明的矩形 //循环出30个雨滴 for(var i=0,len=drops.length;i<len;i++){ drops[i].draw();//调用每个雨滴的绘制方法 } window.requestAnimationFrame(move);//用法类似setInterval新跟那个比setInterval高 } move(); //实例化雨滴 function setDrop(){ //循环30次 for(var i=0;i<counts;i++){ //利用闭包来保存 循环中的变量 (function(j){//j为形参 setTimeout(function(){//设置定时器 var drop = new Drop();//实例化雨滴对象 drop.init();//初始化雨滴 drops.push(drop);//压入 数组drops中 },j*200)//每隔j*200时间生成一个雨滴 })(i)//i为实参 } //console.log(drops); } setDrop(); //随机颜色方法 function color(a){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return "rgba("+r+","+g+","+b+","+a+")"; } </script> </body> </html>代码注释都有
