用Canvas实现动态星空需初始化随机分布的300–800颗星，每颗含位置、大小、透明度及速度属性；通过Math.sin实现错频呼吸闪烁，分三层视差滚动增强深度感；鼠标移动产生局部扰动，点击生成带衰减粒子的新星；性能上优先clearRect、用fillRect绘星、剔除不可见星并适配移动端。
用 Canvas 实现动态星空背景，核心是模拟星星的随机分布、亮度变化、视差运动和鼠标交互（如跟随、扰动），不需要复杂算法，但需注意性能与视觉真实感的平衡。
1. 初始化 Canvas 与基础星空布局
先获取 canvas 元素并设置宽高适配窗口，用 requestAnimationFrame 驱动动画循环。星星用对象数组存储，每个星星包含 x、y、size、alpha（透明度）、speed 和 twinkleSpeed 等属性：
- 用
Math.random()生成满屏随机坐标，避免边缘空白 - 大小控制在 0.2–2.5 像素之间，小星占多数，模拟真实星等分布
- 初始 alpha 设为 0.3–0.9，避免过亮“刺眼”
- 预生成 300–800 颗星（太多易卡顿，太少显空洞）
2. 实现呼吸式闪烁与分层视差滚动
每帧更新每颗星的透明度和位置，制造深度感：
- 对每颗星：用
Math.sin(time * twinkleSpeed + offset)控制 alpha 波动，不同星用不同offset错开闪烁节奏 - 按“星层”分组（如近/中/远三层），每层赋予不同
speed（如 0.1 / 0.04 / 0.01）和缩放系数（scale = 1.0 / layer），让远处星移动慢、显得小 - 水平位移用
x += speed * (mouseX - centerX) * 0.001类似方式实现轻微视差跟随，增强沉浸感
3. 添加鼠标交互：聚焦扰动与点击诞生新星
监听 mousemove 和 click 事件，不直接重绘全屏，而是标记受影响区域：
立即学习“前端免费学习笔记（深入）”；
- 鼠标移动时，计算距鼠标的距离，对半径 150px 内的星星施加斥力：临时增大其
alpha和size，并沿反向微调位置（x += (x - mouseX) * 0.05） - 点击时，在鼠标位置生成 3–5 颗新星，带短生命周期（如 2 秒后 fade out），并附带向外扩散的粒子效果（可用简单循环绘制渐隐小圆点）
- 避免频繁 DOM 查询，把
mouseX/mouseY存为变量，在动画循环中读取
4. 性能优化关键点
Canvas 星空容易掉帧，尤其在低端设备，需主动节制：
- 使用
ctx.clearRect(0, 0, width, height)清屏，比 fillRect 更快；若背景纯黑可跳过清屏，改用globalAlpha = 0.97叠加残影模拟拖尾（更省） - 星星全部用
ctx.fillRect(x, y, size, size)绘制，比arc()快 3–5 倍；需要圆形可用fillRect+shadowBlur模拟柔和光晕 - 每帧只更新逻辑，绘制前做简单可见性剔除：跳过
y height + 10的星 - 移动端禁用 hover 效果，用
touchmove替代mousemove，并降低最大星数（建议 ≤400）
不复杂但容易忽略——真正的“星空感”来自节奏：星星不能同频闪烁，移动不能线性匀速，交互响应要有延迟缓冲（加个 lerp 插值）。代码量通常不到 300 行，重点在参数调校而非算法深度。
