安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
黎明星空背景特效,按真实星表坐标绘制的 Canvas 夜空
编号:黎明星空

黎明星空背景特效,按真实星表坐标绘制的 Canvas 夜空

大小 9 KB
总文件 5 个
发布 2026-09-28
更新 2026-09-28
架构 Canvas
分类 前端资源 - Canvas动画
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

整屏是一张破晓时分的天空:顶端接近墨蓝,往下依次过渡成靛青、暮紫、玫红,贴近地平线的一条是被第一缕晨光染出的暖橙,底部压着一道极浅的地面剪影。天上的星星并非随手撒上去的——源码里内置了一份真实亮星表,每颗星都带赤经、赤纬和星等三项数据,位置和亮度都按这三个值计算。整片天空还在极缓慢地横移,模拟地球自转。技术上是 CSS 渐变画天空 + 原生 Canvas 画星。

这片星空的三个细节

  • 亮度来自星等,不是随机数。星等数值越小星越亮,脚本据此换算出半径与不透明度,于是天狼星、老人星这些真正的亮星在画面上确实最显眼。

  • 只有最亮的几颗带光晕。星等小于 1 的才会额外画一圈更大的淡色光斑,避免满屏都糊成一片。

  • 闪烁是各自独立的往返。每颗星有自己的闪烁速度和基准亮度,在一个上下限之间来回渐变,所以不会出现整片同步呼吸的假象。

天球坐标是怎么落到屏幕上的

用的是最简单的等距圆柱投影:把赤经差和赤纬差直接按比例换算成像素。其中这一步容易被忽略——赤经是 0 到 360 度的环形量,必须处理跨越零点的情况:

if (deltaRA > 180) deltaRA -= 360;

少了这两行,当视野中心转到 0 度附近时,本该在左边的星会突然跳到屏幕另一侧。这种投影在小视场下失真很小,代价极低,很适合做背景;如果要做成可自由转动的星图,靠近天极时就需要换成球面投影了。

能改的地方

天空的配色是一条多段线性渐变,改几个色标就能从破晓变成黄昏或极夜。视野中心的赤经赤纬、视场角度、横移速度都是脚本顶部的变量,调整它们等于换一个观星地点和时刻。背景暗星的数量也是一个常量,想要更空旷就调小。星表本身可以直接追加条目,格式是赤经、赤纬、星等三个数。

常见问题

星星太暗看不清?

画布整体设了一层偏低的不透明度,用来表现「晨光里星星正在淡去」。想要更浓的夜空,把这个值调高,并把天空渐变的上半部分压暗即可。

能当整页背景吗?

可以。三层都是绝对定位并铺满视口,把内容放在更高的层级上即可;注意画布会在窗口尺寸变化时重建星点,内容层不受影响。

手机上会卡吗?

默认两百多颗星,每帧只做一次圆形绘制,移动端压力不大。若目标机型较旧,减少背景暗星数量是最直接的优化。

适合用在哪

天文、露营、民宿类站点的首屏,深夜模式的页面背景,以及需要安静氛围的登录页与加载页。星表数据、投影换算与闪烁逻辑的完整实现都在脚本里,下载后可查看。

模板目录结构

    最新资源

    现代农业 HTML 建站模板,有机种植与农产品出口响应式网页模板

    沃素

    现代农业 HTML 建站模板,有机种植与农产品出口响应式网页模板
    货运物流行业专用 Bootstrap 建站模板,国际货代仓储运输响应式网页模板

    络捷

    货运物流行业专用 Bootstrap 建站模板,国际货代仓储运输响应式网页模板
    滚动圆形遮罩切屏特效,GSAP 驱动的整屏图片揭示动画

    滚动揭示效果

    滚动圆形遮罩切屏特效,GSAP 驱动的整屏图片揭示动画
    叠楼 HTML 小游戏,对准落点越准楼层越高的 Canvas 堆塔玩法

    盖楼小游戏

    叠楼 HTML 小游戏,对准落点越准楼层越高的 Canvas 堆塔玩法
    新拟态JS音乐播放器,凹凸按钮与可拖动进度条的播放组件

    拟物播放器

    新拟态JS音乐播放器,凹凸按钮与可拖动进度条的播放组件
    鼠标感应摆动树特效,随指针推开并回弹的 Canvas 粒子树

    低多边形树

    鼠标感应摆动树特效,随指针推开并回弹的 Canvas 粒子树