用原生 Canvas API 实现可交互的粒子星空效果——数百个闪烁的星星、鼠标引力交互、流线拖尾效果。
每个星星是一个粒子对象，包含以下属性：
使用 requestAnimationFrame() 而非 setInterval()——前者由浏览器优化调度，与屏幕刷新率同步（60fps），动画更流畅且更省电。
每帧执行：清空画布 → 更新所有粒子状态 → 绘制连线 → 绘制粒子 → 重复。
利用正弦波函数实现自然的明暗交替：alpha = 0.3 + 0.7 * Math.sin(time * speed + phase)。每颗星的 phase 值是随机的，所以它们不会同步闪烁，看起来更自然。
鼠标在 Canvas 上移动时，距离鼠标 100px 范围内的星星会被吸引——向鼠标方向增加一个加速度向量。远离鼠标后，星星逐渐恢复原始速度。核心是距离计算和引力衰减：
force = (maxDistance - distance) / maxDistance * attractionStrength
两颗星星距离小于 150px 时，在它们之间绘制半透明连线。距离越近，线条越亮。注意：如果粒子数量为 N，朴素的两两比较复杂度是 O(N^2)。优化方案：空间哈希网格，将 Canvas 划分为若干格子，只检查相邻格子内的粒子。
心得：Canvas 动画的难点不在于单个效果，而在于多个效果叠加时的性能控制。200 个粒子 + 连线检测 + 鼠标交互，每帧的计算量要控制在 16ms 以内才能保持 60fps。