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不断的画线，画圆弧就行了。
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas" style="position: absolute; height: 100%; width:100%;"></canvas>
<script>
window.onload = main;
function main() {
// 获取canvas元素
