<- 返回博客
用 Canvas 给首页写了一片会呼吸的星网

用 Canvas 给首页写了一片会呼吸的星网

2026-08-21 / 253 次阅读Canvas动效前端

效果目标

粒子随机漂移,距离够近时连线,鼠标靠近产生引力——整个背景像一片活的神经网络。

核心思路

  1. requestAnimationFrame 驱动主循环
  2. 粒子间距离小于阈值时绘制渐变连线
  3. 鼠标位置作为引力源,反比衰减

性能要点

粒子数量按屏幕面积动态计算,并监听 visibilitychange 在页面不可见时暂停渲染。