canvas实现漂亮的下雨效果的示例

说明

这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。

解释

看图来分析下，我们需要实现哪些效果。

1、雨滴下落效果，移动鼠标控制下落方向

2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同

3、雨滴下落到鼠标坐标一定范围内，散成小水珠，同样的，小水珠的移动方向也和鼠标移动方向相同

好的，我们把整个效果大致拆分成三个效果，实现这三个效果，就完成了。

我们一步一步来实现。

1、雨滴下落效果，移动鼠标控制下落方向

实现整个效果的思路就是，

初始时

用一个数组保存雨滴对象。

一个雨滴对象里面有各个属性用来表示，雨滴的x坐标，y坐标，长度，下落速度，颜色，判断是否删除的标志位

更新动画时

往数组中添加一定数量的雨滴对象，然后遍历数组，修改每个雨滴对象的x坐标和y坐标，用canvas根据雨滴对象的坐标，画出两个点，连起来就是一个雨滴了。

所以实现效果的重点就在坐标上

初始化一个雨滴的时候

雨滴x坐标：一个随机数

雨滴y坐标：-100，这样是为了让雨滴从可视区域外进来

更新动画时

雨滴x坐标：原x坐标的值 + speed * speedx

speed 是一个固定的值，表示雨滴下落速度，

speedx 是一个和鼠标移动方向有关系的变量，speedx = speedx + (maxspeedx - speedx) / 50

而maxspeedx 是根据鼠标移动方向得到的一个值

maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2)，

e.clientX：鼠标距离可视区域左边的值

canvasEl.clientWidth：整个可视区域的宽度

也就是说 speedx 是一个逐渐接近maxspeedx 的值

maxspeedx 的取值范围是 -1 到 1，他的值越接近 -1，说明方向越向左，值越接近1，说明方向越向右。

为什么不直接用maxspeedx ？

这是为了让雨滴变化方向的速度不要那么快，不要跟随鼠标变化方向立即改变，要有点点的延迟，看上去更好些。

如果用maxspeedx ，是这样的效果

如果用speedx ，是这样的效果

雨滴y坐标：原y坐标的值 + speed

speed 和上面x坐标中提到的一样，是一个固定值，表示雨滴下落速度，

好的，最后就是用canvas根据雨滴对象的坐标，画两个点了，然后连起来，雨滴就画出来了

第一个点坐标比较简单，直接获取雨滴对象的x坐标和y坐标，就是这个点的坐标

第二个点的坐标：

x坐标 = 雨滴x坐标的值 + 雨滴长度 * speedx

y坐标 = 雨滴y坐标的值 + 雨滴长度

最后把这两个点连起来，就有一条线了，就是一个雨滴了

当设置x坐标时，又用上了变量 speedx，这是为了让 雨滴方向 和 雨滴下落方向相同，

当不用 speedx时，是这样

当用上speedx时，是这样

2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同

这里的思路其实，和上面的效果有些相似

初始时

用一个数组保存小水珠对象。

一个小水珠，其实就是画一个圆弧。

一个小水珠对象里面有各个属性用来表示，小水珠的坐标，x轴移动速度，y轴移动速度，圆的半径，判断是否删除的标志位。

更新动画时

往数组中添加一定数量的小水珠对象，然后遍历数组，修改每个小水珠对象的x坐标和y坐标，用canvas根据小水珠对象的坐标属性 和 半径属性，画一个圆弧。

所以实现效果的重点还在坐标上

初始化一个小水珠的时候

小水珠是雨滴消失的时候出现的，所以小水珠的坐标也是根据雨滴的坐标来的，删除一个雨滴，就出现一些小水珠，而且小水珠的移动方向也是和雨滴下落方向，鼠标移动方向一样，所以还是会需要上面提到的变量 speedx，

小水珠x坐标： 删除的雨滴x坐标 + 删除的雨滴长度 * speedx

小水珠y坐标：删除的雨滴y坐标 + 删除的雨滴长度

更新动画时

这里要用到小水珠对象的两个属性 vx（x轴的值 的变化速度） 和vy（y轴的值 的变化速度），

小水珠的x坐标

vx = vx + speedx / 2

小水珠的x坐标 =原x坐标 + vx，

speedx：上面提到的和鼠标移动方向相关的一个变量，这里的作用就是用来控制小水珠的移动方向和其他方向相同

speedx / 2，除2是为了使 让小水珠 在x轴的移动距离短一点，看上去更真实点

小水珠的y坐标

vy = vy + gravity

小水珠的y坐标 = 原y坐标 + vy;，

vy：一个负数

gravity：重力，一个正数，完整代码里设置的是0.5

因为 原y坐标 是一个正数，这样小水珠y坐标的值，就会先减小后增大，这是为了实现小水珠会先上升后下降的效果，看图

最后就是用canvas根据小水珠的坐标属性和半径属性画圆弧就可以了，弧度是随机的

3、雨滴下落到鼠标坐标一定范围内，散成小水珠，同样的，小水珠的移动方向也和鼠标移动方向相同

确定图中圆的大小容易，假设圆的半径是35，我们能获取到鼠标的坐标，以鼠标的坐标为圆心，35为半径，就确定了圆的大小。

重点在于如何判断，雨滴是不是进入了这个范围，这就要用勾股定理了，看图。

因为雨滴是两个点连起来的一条线，要看雨滴是不是进入了这个范围内， 就是看雨滴靠下边的点的坐标，到鼠标的直线距离是多少，就是图中AB线段的长度。

勾股定理：直角三角形的两条直角边的平方和等于斜边的平方。

AB = Math.sqrt(BCBC + AC AC)

BC = 雨滴x坐标 - 鼠标x坐标

AC = 雨滴y坐标 - 鼠标y坐标

Math.sqrt()方法用来计算一个数的平方根

我们知道雨滴到鼠标的直线距离后，和圆的半径比较下，大于半径就不在范围内，否则就是在了。

如果在范围内，就删除雨滴，画一些小水珠。

总结

要实现这个效果，麻烦的地方在于方向，雨滴方向，雨滴下落方向，小水珠移动方向，而这些都和鼠标移动方向相关，确定各种方向后，根据距离，用canvas不断的画线，画圆弧就行了。

完整代码

rush:html;toolbar:false">