die: false,
// 雨滴x坐标
posx: e,
// 雨滴y坐标
posy: -50,
// 雨滴的长度
h: temp,
// 雨滴的颜色
color: getRgb(Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75))
};
// 把创建好的line（雨滴）对象，添加到保存雨滴的数组
linelist.push(line);
}
// 画一个小水珠（雨滴散开后的小水珠就是一个个的圆弧）
function createDrop(x, y) {
// 一个 drop 对象，代表一个圆弧
var drop = {
// 判断是否删除，值为true就删除
die: false,
// 圆弧圆心的x坐标
posx: x,
// 圆弧圆心的y坐标
posy: y,
// vx 表示 x轴的值 变化的速度
vx: (Math.random() - 0.5) * 8,
// vy 表示 y轴的值 变化的速度 取值范围：-3 到 -9
vy: Math.random() * (-6) - 3,
// 圆弧的半径
radius: Math.random() * 1.5 + 1
};
return drop;
}
// 画一定数量的小水珠
function madedrops(x, y) {
// 随机生成一个数 maxi
// maxi 代表要画小水珠的数量
var maxi = Math.floor(Math.random() * 5 + 5);
for (var i = 0; i < maxi; i++) {
dropList.push(createDrop(x, y));
}
}
// 开始调用update函数，更新动画
window.requestAnimationFrame(update);
// 更新动画
function update() {
// 如果保存小水珠的数组有内容
if (dropList.length > 0) {
// 遍历保存小水珠的数组
dropList.forEach(function (e) {
//设置e.vx，vx表示x坐标变化的速度
// (speedx)/2 是为了，让小水珠 在x轴的移动距离短一点，看上去更真实点
// 也使 小水珠的移动方向 和 雨滴方向，雨滴下落方向，鼠标移动方向相同
e.vx = e.vx + (speedx / 2);
e.posx = e.posx + e.vx;
//设置e.vy，vy表示y坐标变化的速度
// e.vy的范围是-3 到 -9，而这时e.posy（y坐标）一定是正值，所以 e.posy的值会先减小后增大
// 也就是实现 雨滴散成小水珠，小水珠会先上升后下降的效果
e.vy = e.vy + gravity;
e.posy = e.posy + e.vy;
// 如果 小水珠y坐标 大于 可视区域的高度，设置die属性为true
// 小水珠如果超出可视区域就删除掉
if (e.posy > canvasEl.clientHeight) {
e.die = true;
}
});
}
// 删除 die属性为ture 的数组成员
// 可视区域外的小水珠删除掉
for (var i = dropList.length - 1; i >= 0; i--) {
if (dropList[i].die) {
dropList.splice(i, 1);
}
}
// 设置下雨方向变换的速度，取值范围： -1 到 1
// 当 speedx = maxspeedx时，下雨方向 会 随鼠标移动方向立即改变
speedx = speedx + (maxspeedx - speedx) / 50;
// 根据lineNum的值，画一定数量雨滴
for (var i = 0; i < lineNum; i++) {
// 调用createLine 函数，参数是雨滴x坐标
createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width));
