标签：nbsp shift image width ima img 通过 效果图 dom
效果图
1.做出canvas画布和声明一个用来存储雨滴的数组
var c=document.getElementById(‘myCanvas‘); var ctx= c.getContext(‘2d‘); var ary=[];
2.将雨滴的位置、大小得到
var x=Math.random()*1000;//在画布内随机生成雨滴x轴位置 var width=Math.random()*3;//随机生成雨滴宽度 var h=Math.random()*50+10;//随机生成雨滴长度 var y=-60;//雨滴出现位置
由于最后所有的东西都需要用setinterval包起来，所以这里的变量只能用做局部变量，不能用全局声明。
3.将生成的雨滴存到数组
var rain={ x:x, y:y, width:width, color:"white", h:h, fun:function(){ ctx.beginPath(); ctx.fillStyle=rain.color; ctx.fillRect(rain.x,rain.y,rain.width,rain.h); ctx.fill(); } }; ary.push(rain);
冒号前为键名，冒号后为之前声明的变量，用作键值，fun里是在画布上生成雨滴，最后通过push的方法将其存入数组。
4.让雨滴往下落，当雨滴落到画布外，将雨滴从数组中删除
var t=setInterval(function(){ rain.y+=10; if(rain.y>800){ clearInterval(t); ary.shift(rain); } },10);
在外面调用生成雨滴的函数时，需要加上声明的json名，不然调用不到，如果雨滴的y轴位置大于了画布高度，就停止下落，同时，用shift的方式将雨滴移出数组。
5。删除雨滴下落时的前面生成过的雨滴
function hh(){ ctx.clearRect(0,0,1000,800); ary.forEach(function(obj){ obj.fun(); }); requestAnimationFrame(hh); } hh();
用clearrect的方式将整个画布上的内容清空，由于雨滴是每次下落5px时就会再出现一个新的雨滴，如果不删除下落之前的雨滴，画布上就会出现很多，将其清空只剩下一个下落的雨滴，最后调用函数即可。
标签：nbsp shift image width ima img 通过 效果图 dom
原文地址：http://www.cnblogs.com/zh23/p/7100879.html
