摘要：说明这篇文章说如何用画出漂亮的下雨效果，先看看最后实现的效果吧。
说明
这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。
效果图
看图来分析下，我们需要实现哪些效果。
1、雨滴下落效果，移动鼠标控制下落方向
2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同
3、雨滴下落到鼠标坐标一定范围内，散成小水珠，同样的，小水珠的移动方向也和鼠标移动方向相同
好的，我们把整个效果大致拆分成三个效果，实现这三个效果，就完成了。
我们一步一步来实现。
实现整个效果的思路就是，
初始时
用一个数组保存雨滴对象。
一个雨滴对象里面有各个属性用来表示，雨滴的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时，是这样
这里的思路其实，和上面的效果有些相似
初始时
用一个数组保存小水珠对象。
一个小水珠，其实就是画一个圆弧。
一个小水珠对象里面有各个属性用来表示，小水珠的坐标，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(BC*BC + AC * AC)
BC = 雨滴x坐标 - 鼠标x坐标
AC = 雨滴y坐标 - 鼠标y坐标
Math.sqrt()方法用来计算一个数的平方根
我们知道雨滴到鼠标的直线距离后，和圆的半径比较下，大于半径就不在范围内，否则就是在了。
如果在范围内，就删除雨滴，画一些小水珠。
要实现这个效果，麻烦的地方在于方向，雨滴方向，雨滴下落方向，小水珠移动方向，而这些都和鼠标移动方向相关，确定各种方向后，根据距离，用canvas不断的画线，画圆弧就行了。
完整代码最后说一句
这个特效的作者是 sxq111本尊 大神，我只是站在巨人的肩膀上，喜欢的小伙伴们可以去github上给个小star哦。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94329.html
摘要：简介在上看到一个做的下雨效果动画，感觉蛮有意思的。让浏览器要重绘时调用你指定的方法来绘制你的动画。残影的绘制可以说是雨滴下落的关键。发动自己的智慧，相信能做出更多奇妙的动画。转载出处前端开发制作的下雨动画简介 在codepen上看到一个Canvas做的下雨效果动画，感觉蛮有意思的。就研究了下，这里来分享下，实现技巧。效果可以见下面的链接。 霓虹雨:http://codepen.io/nate...
摘要：简介在上看到一个做的下雨效果动画，感觉蛮有意思的。让浏览器要重绘时调用你指定的方法来绘制你的动画。残影的绘制可以说是雨滴下落的关键。用来绘制动画的效果确实能让人眼前一亮，让的视觉效果提升一大截。发动自己的智慧，相信能做出更多奇妙的动画。 简介 在codepen上看到一个Canvas做的下雨效果动画，感觉蛮有意思的。就研究了下，这里来分享下，实现技巧。效果可以见下面的链接。 霓虹雨: h...
摘要：运动坐标变量坐标变量绘制方法画布渲染清除画布位置变化绘制继续渲染动起来的多点多线动的是点，画的是线给对象添加运动变量和两个值表示点在轴和轴的运动量此处为在之间运动。 Canvas 点线动画案例 画圆： arc(x, y, r, start, stop) 画线： moveTo(x, y) 定义线条开始坐标lineTo(x, y) 定义线条结束坐标 填充： fill() 绘制： stro...
阅读 1457·2021-08-09 13:47
阅读 2740·2019-08-30 15:55
阅读 3461·2019-08-29 15:42
阅读 1068·2019-08-29 13:45
阅读 2968·2019-08-29 12:33
阅读 1713·2019-08-26 11:58
阅读 937·2019-08-26 10:19
阅读 2382·2019-08-23 18:00
