前端canvas粒子动画背景(带鼠标跟随和点击散开)

目录 闲聊 看下效果 先贴下代码吧 大概说一下流程 下面让我来详细说一下 1、初始化基础属性 2、添加鼠标移动事件并实时更新鼠标坐标 3、通过随机数生成粒子的坐标和横纵轴速度 4、渲染粒子并将粒子对象保存在数组中 5、调用requestAnimationFrame启动动画,使粒子移动起来 6、通过横纵坐标和速度计算粒子位置 7、计算与鼠标距离进行坐标的修正 8、计算与鼠标距离并进行连线 9、计算粒子直接的距离并进行连线 10、添加鼠标点击事件并调用粒子的散开事件 11、通过与鼠标的距离和相对位置进行计算来重新给粒子添加速度 12、监听页面大小变化来初始化画布 总结 闲聊 一年前觉得别人写的