说明
这篇文章说如何用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根据雨滴对象的坐标，画两个点了，然后连起来，雨滴就画出来了
