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不断的画线,画圆弧就行了。

完整代码



 
 


 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法