canvas粒子动画需用requestanimationframe驱动，粒子为内存对象数组，每次渲染清空再重绘全部；反弹需速度反向+位置校正；同色批次绘制、禁用过大shadowblur、鼠标坐标需按比例缩放；须定期过滤透明粒子防内存泄漏。
Canvas粒子动画的核心是requestAnimationFrame + 粒子对象数组
直接用 setInterval 更新画布会掉帧、卡顿，必须用 requestAnimationFrame 驱动循环。粒子不是DOM节点，而是内存中的一组对象（比如 {x, y, vx, vy, size, color}），每次渲染前更新位置、判断边界、重绘整个画布。
常见错误是把粒子当
clearRect 和 fillCircle 的开销。- 初始化时用
canvas.getContext('2d')获取绘图上下文，别漏掉'2d' - 粒子坐标更新后，务必在下一帧调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则拖影 - 避免在循环里反复调用
ctx.fillStyle = ...，可提前设好或用save()/restore()
如何让粒子自动反弹而不是穿出画布边界
粒子碰到边缘时，只需反转对应方向的速度分量：vx = -vx 或 vy = -vy，但必须配合位置校正，否则会卡在边线上抖动。
典型错误是只判断 x > width 就反转，却没把 x 拉回 width - 1 内，导致下一帧又触发判断，形成震荡。
- 推荐写法：
if (p.x > canvas.width || p.x （加点阻尼更自然） - 同时修正位置：
p.x = Math.max(1, Math.min(canvas.width - 1, p.x)); - Y轴同理，注意Canvas的Y轴向下为正，顶部是
y = 0
性能瓶颈常出现在fillStyle和shadowBlur频繁切换
每个粒子都设置 ctx.fillStyle 和 ctx.shadowBlur 会让渲染变慢，尤其在低端设备上。Chrome DevTools 的 Rendering 面板里能看到“Layer rasterization”时间飙升。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
如果所有粒子颜色相近、阴影一致，完全可以批量处理：先统一设样式，再遍历绘制；若需差异化（如根据速度变色），优先用 HSL 动态计算字符串，而非创建新 CanvasGradient。
- 避免：
particles.forEach(p => { ctx.fillStyle = p.color; ctx.beginPath(); ... }); - 推荐：
ctx.fillStyle = '#ff6b6b'; particles.forEach(drawParticle);（同色批次绘制） -
shadowBlur超过 10 就明显拖慢，粒子小的话建议设为0或2
鼠标交互时粒子飞向/逃离鼠标的实现要点
监听 mousemove 得到 clientX/clientY，再通过 canvas.getBoundingClientRect() 转成画布坐标系。关键不是“移动粒子”，而是实时修改它的目标向量或受力加速度。
容易忽略的是坐标系缩放问题：Canvas 的 width/height 属性值 ≠ CSS 显示尺寸。如果用 CSS 放大了画布，鼠标坐标必须按比例缩放，否则交互错位。
- 正确获取画布内坐标：
const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) * (canvas.width / rect.width); - 粒子朝向鼠标：计算
dx = mouseX - p.x,dy = mouseY - p.y，再归一化后叠加到p.vx/p.vy - 逃离效果只需把最终加速度乘以
-1，但记得限制最大速度，否则粒子瞬间飞出视野
实际项目里最常被低估的是粒子生命周期管理——不清理已移出屏幕或透明度归零的粒子，数组会越滚越大。记得每帧用 particles = particles.filter(p => p.alpha > 0.01) 做轻量回收。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
