第一个点坐标比较简单，直接获取雨滴对象的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坐标的值，就会先减小后增大，这是为了实现小水珠会先上升后下降的效果，看图
