<- 返回博客

用 Canvas 给首页写了一片会呼吸的星网
2026-08-21 / 253 次阅读Canvas动效前端
效果目标
粒子随机漂移,距离够近时连线,鼠标靠近产生引力——整个背景像一片活的神经网络。
核心思路
- 用
requestAnimationFrame驱动主循环 - 粒子间距离小于阈值时绘制渐变连线
- 鼠标位置作为引力源,反比衰减
性能要点
粒子数量按屏幕面积动态计算,并监听 visibilitychange 在页面不可见时暂停渲染。