canvas用数组方式做出下雨效果

Posted 2020-09-26

效果图

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时就会再出现一个新的雨滴，如果不删除下落之前的雨滴，画布上就会出现很多，将其清空只剩下一个下落的雨滴，最后调用函数即可。