用 Canvas 画一片不会打扰阅读的星空,真假，nb7666

很多博客的星空背景失败，不是因为星星不够多，而是因为太努力。闪烁太快、流星太频繁、亮度太高，读者的注意力被反复拽走，最后只能关掉。

我想要的是一片「存在感很低」的星空：你不注意它时，它是安静的底色；你注意到它时，它确实在呼吸。

密度比数量重要

按屏幕面积算，每 1.7 万像素一颗星，1440×900 大约 76 颗。这个密度在深色背景上刚好能形成层次，又不会让文字边缘变得嘈杂。

const count = Math.round((w * h) / 17000);

呼吸要慢

每颗星有独立的相位和速度，透明度在 0.18 到 0.73 之间缓慢变化。周期大约是 8–16 秒，快到能被察觉就失败了。

const alpha = s.a + Math.sin(t * s.speed + s.phase) * 0.15;

流星是调味料

我把流星频率设在 14–28 秒随机一次，轨迹长度控制在 280px 以内。它只是偶尔提醒你「这是夜空」，不是烟花。

性能上的三个细节

1. 用 devicePixelRatio 限制在 2 以内，高分屏不至于把像素翻四倍。
2. 只在 requestAnimationFrame 里做一次 clearRect，不要每颗星都创建渐变。
3. prefers-reduced-motion 打开时直接不启动动画。

一片好的背景，应该让人忘记它的存在。