示例项目二：分层星空背景

占位正文：这个示例用于展示项目详情的正文结构，包括背景、方案、取舍与复盘四个部分。

背景与目标#

背景动画很容易成为性能负担：无限循环的绘制、频繁的对象分配、后台标签页继续跑 RAF，都会让移动端发热掉电。目标是做出可感知的景深，同时把单帧绘制控制在预算内。

约束#

• 单 canvas，不使用 WebGL
• 帧循环内不创建对象
• 尊重 prefers-reduced-motion
• 移动端与低端设备有明确降级

方案与实现#

星点按面积采样，分成远景与中景两层，近景亮星数量固定。绘制时复用同一个画布与预生成的光晕精灵。

const count = Math.min(cap, Math.round(area * density));
for (let index = 0; index < count; index += 1) {
  stars.push({ x: Math.random() * width, y: Math.random() * height });
}

难点与取舍#

• 视差与眩晕：位移系数控制在 0.01 与 0.02，滚动时不改变星点相位。
• 切回标签页：用 performance.now() 计算时间差并裁剪到 50ms，避免透明度跳变。
• 关闭动效：只绘制一帧，不启动 RAF。

结果与复盘#

示例项目不提供真实性能数据。复盘结论是：把“是否播放动画”的判断集中在一处，比分散在每个绘制函数里更容易维护。