本文介绍如何利用canvas和三角函数制作动态气泡效果。通过设置循环定时器，随机生成气泡的圆心坐标、半径，并用三角函数确定浮动路径。在canvas上不断清空并重新绘制气泡，实现动画效果。
利用canvas和三角函数做了一个简单的起泡效果，每个气泡的圆形都是随机生成的，且气泡线上浮动的路径为三角函数曲线，步骤如下：
1、设置一个循环定时器，随机生成每个圆形的圆心坐标、半径等数据，存储在数组arr中；
2、设置一个循环定时器，取出arr中每个圆的数据；
3、利用一个for循环，通过操作x,y等来实现动画效果，因为canvas中无法直接操作绘制的图形，所以通过不断地清空画布，再绘制不同状态的图形来实现动画效果；为了保证arr不会过大，利用判断，清除arr中不符合要求的对象
4、再利用一个for循环来将圆形绘制到画布上 ；
效果（是动态的，但是懒得弄动图@~~@）：
完整的代码：
<!DOCTYPE html&
最低0.47元/天 解锁文章
扫一扫
643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
