Canvas粒子动态背景的核心是控制大量粒子的位置、速度、透明度及连线关系并持续更新重绘；关键在运动规律与交互逻辑，如鼠标跟随、连线、渐变色和缓动衰减。
用 Canvas 实现粒子动态背景，核心在于控制大量小圆点（粒子）的位置、速度、透明度和连接关系，并持续更新与重绘。效果酷炫的关键不是单个粒子，而是它们之间的运动规律、交互逻辑和视觉层次——比如鼠标跟随、粒子连线、渐变色、缓动衰减等。
初始化画布与基础粒子系统
先获取 canvas 元素和 2D 上下文，设置画布尺寸为全屏并适配设备像素比，避免模糊：
- 用
canvas.width = window.innerWidth * window.devicePixelRatio提升清晰度 - 每个粒子用对象表示：包含
x、y、vx、vy（速度）、size、alpha等属性 - 粒子数量建议 100–300 个，太多影响性能；可用
Math.random()随机分布初始位置
实现粒子运动与生命周期
在 requestAnimationFrame 循环中更新每帧状态：
- 对每个粒子：更新
x += vx、y += vy，加入轻微随机扰动或正弦偏移增强自然感 - 碰到边界时，可反弹（翻转速度）、回弹（设为反向但衰减）、或从另一侧穿出（环形世界）
- 让粒子缓慢“老化”：每帧减小
alpha或size，归零后重置到屏幕外随机位置，形成呼吸感
添加鼠标交互与粒子连线
监听 mousemove 获取鼠标坐标，用于影响粒子行为：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 计算粒子到鼠标的距离，若小于阈值（如 120px），则朝鼠标方向轻微加速或排斥
- 两两粒子间若距离足够近（如 ctx.beginPath() → lineTo() → stroke() 绘制细线；线宽和透明度随距离增大而减淡
- 连线可叠加一层半透明黑色（
fillStyle = 'rgba(0,0,0,0.05)'）再清屏，制造残影拖尾效果
提升视觉质感的细节技巧
纯色粒子容易单调，加一点色彩和光影就能明显升级观感：
- 粒子颜色用 HSL 动态生成：
hsl(${360 * Math.sin(time * 0.001)}, 70%, 60%)，随时间缓慢变色 - 用
ctx.shadowColor和shadowBlur给粒子加柔光，注意开启前关闭抗锯齿影响 - 背景用
createRadialGradient做中心微光，或叠加极低透明度的噪点纹理 canvas（离屏绘制一次复用）
不复杂但容易忽略：性能优化比炫技更重要。避免每帧重复创建数组、频繁调用 getBoundingClientRect，把常量提成变量，粒子数组复用而非反复 new。上线前在低端手机测帧率，必要时根据 window.deviceMemory 自适应粒子数。
