整屏是一张破晓时分的天空:顶端接近墨蓝,往下依次过渡成靛青、暮紫、玫红,贴近地平线的一条是被第一缕晨光染出的暖橙,底部压着一道极浅的地面剪影。天上的星星并非随手撒上去的——源码里内置了一份真实亮星表,每颗星都带赤经、赤纬和星等三项数据,位置和亮度都按这三个值计算。整片天空还在极缓慢地横移,模拟地球自转。技术上是 CSS 渐变画天空 + 原生 Canvas 画星。
这片星空的三个细节
亮度来自星等,不是随机数。星等数值越小星越亮,脚本据此换算出半径与不透明度,于是天狼星、老人星这些真正的亮星在画面上确实最显眼。
只有最亮的几颗带光晕。星等小于 1 的才会额外画一圈更大的淡色光斑,避免满屏都糊成一片。
闪烁是各自独立的往返。每颗星有自己的闪烁速度和基准亮度,在一个上下限之间来回渐变,所以不会出现整片同步呼吸的假象。
天球坐标是怎么落到屏幕上的
用的是最简单的等距圆柱投影:把赤经差和赤纬差直接按比例换算成像素。其中这一步容易被忽略——赤经是 0 到 360 度的环形量,必须处理跨越零点的情况:
if (deltaRA > 180) deltaRA -= 360;
少了这两行,当视野中心转到 0 度附近时,本该在左边的星会突然跳到屏幕另一侧。这种投影在小视场下失真很小,代价极低,很适合做背景;如果要做成可自由转动的星图,靠近天极时就需要换成球面投影了。
能改的地方
天空的配色是一条多段线性渐变,改几个色标就能从破晓变成黄昏或极夜。视野中心的赤经赤纬、视场角度、横移速度都是脚本顶部的变量,调整它们等于换一个观星地点和时刻。背景暗星的数量也是一个常量,想要更空旷就调小。星表本身可以直接追加条目,格式是赤经、赤纬、星等三个数。
常见问题
星星太暗看不清?
画布整体设了一层偏低的不透明度,用来表现「晨光里星星正在淡去」。想要更浓的夜空,把这个值调高,并把天空渐变的上半部分压暗即可。
能当整页背景吗?
可以。三层都是绝对定位并铺满视口,把内容放在更高的层级上即可;注意画布会在窗口尺寸变化时重建星点,内容层不受影响。
手机上会卡吗?
默认两百多颗星,每帧只做一次圆形绘制,移动端压力不大。若目标机型较旧,减少背景暗星数量是最直接的优化。
适合用在哪
天文、露营、民宿类站点的首屏,深夜模式的页面背景,以及需要安静氛围的登录页与加载页。星表数据、投影换算与闪烁逻辑的完整实现都在脚本里,下载后可查看。