canvas星空背景通过随机生成星星位置亮度,用正弦函数控制alpha实现柔和闪烁,微位移加边界吸附模拟飘移,分三层渲染增强景深,并以半透明覆盖清屏优化性能。

用Canvas绘制星空背景,核心是用随机数生成星星位置和亮度,再通过粒子位移模拟微弱的闪烁与飘移效果,不需要复杂物理,关键在节奏控制和视觉层次。
初始化画布与基础星星
先获取Canvas上下文,设置全屏尺寸。每颗星星用对象表示,包含x、y、size(0.2–1.8)、alpha(0.3–1.0)、twinkleSpeed(0.002–0.008)等属性。用Math.random()批量生成300–800颗星星,避免集中在边缘——可对x、y加10%边距偏移。
实现自然闪烁与缓慢位移
在动画循环中,每帧更新每颗星星:
- 用正弦函数驱动alpha变化:star.alpha = 0.4 + 0.6 * Math.abs(Math.sin(star.time * star.twinkleSpeed)),让明暗过渡柔和不突兀
- 位移量极小(每次±0.02px),仅作用于x或y之一,并叠加一个低频正弦偏移,模拟“呼吸感”飘动
- 为避免整体漂移,位移后做边界吸附:超出画布时重置到对侧边缘附近,保持星空无限感
分层渲染增强景深
画两到三层星星,每层独立更新:
- 前景层:星星略大(size 1.0–1.8)、移动稍快、alpha更高,数量约20%
- 中景层:默认参数,占60%,作为主视觉层
- 背景层:星星细小(size 0.2–0.6)、几乎不移动、alpha偏低(0.2–0.5),营造远距离模糊感
按背景→中景→前景顺序绘制,利用alpha叠加自然形成纵深。
性能与观感优化细节
避免每帧全量重绘:
- 清屏不用clearRect全刷,改用半透明黑色覆盖(ctx.fillStyle = 'rgba(8, 12, 20, 0.1)'; ctx.fillRect(0,0,w,h)),保留残影增强流动感
- 星星绘制用fillRect而非arc,省去路径开销;小尺寸下视觉无差别
- 控制总粒子数,移动端建议≤400颗,PC端可到700颗,配合requestAnimationFrame节流











