星空闪烁背景特效（Canvas 实现，星星数量/闪烁速度可调）

效果演示（真实可交互）

完整代码

<canvas id="stars" style="width:100%;height:320px;"></canvas>

const canvas = document.getElementById('stars');
const ctx = canvas.getContext('2d');
let W, H, stars = [];
const cfg = { count: 180, speed: 8, color: '#ffffff' };

function resize() {
  const r = canvas.getBoundingClientRect();
  const dpr = window.devicePixelRatio || 1;
  W = canvas.width = r.width * dpr;
  H = canvas.height = r.height * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
function init() {
  stars = [];
  for (let i = 0; i < cfg.count; i++) {
    stars.push({
      x: Math.random() * W,
      y: Math.random() * H,
      r: Math.random() * 1.5 + 0.4,
      base: Math.random() * 0.7 + 0.3,
      phase: Math.random() * Math.PI * 2,
      freq: Math.random() * 1.6 + 0.4,
      drift: (Math.random() - .5) * 0.15,
    });
  }
}
let t = 0;
function step() {
  t += 0.016;
  ctx.clearRect(0, 0, W, H);
  for (const s of stars) {
    s.x += s.drift;
    if (s.x > W) s.x = 0;
    if (s.x < 0) s.x = W;
    const tw = 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(t * s.freq * 2.2 + s.phase));
    const alpha = s.base * tw;
    if (s.r > 1.15) {
      ctx.beginPath();
      ctx.arc(s.x, s.y, s.r * 3.2, 0, Math.PI * 2);
      ctx.fillStyle = cfg.color;
      ctx.globalAlpha = alpha * 0.18;
      ctx.fill();
    }
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
    ctx.fillStyle = cfg.color;
    ctx.globalAlpha = alpha;
    ctx.fill();
  }
  ctx.globalAlpha = 1;
  requestAnimationFrame(step);
}
resize(); init(); step();
window.addEventListener('resize', () => { resize(); init(); });

canvas {
  background: radial-gradient(ellipse at 50% 30%, #1b2340 0%, #0c1020 60%, #070a14 100%);
}

参数说明

兼容性与性能

• 纯原生 Canvas 2D，无任何第三方库，压缩后不足 1KB
• 已适配 devicePixelRatio，高分屏（Retina）下依然清晰锐利
• 每帧只做圆形填充与 alpha 计算，400 颗星星在现代设备上占用几乎可以忽略；移动端建议 ≤200 颗
• requestAnimationFrame 驱动，页面切到后台时浏览器自动暂停，不消耗电量
• 支持所有现代浏览器（Chrome / Safari / Firefox / Edge），IE 11 不在支持范围

常见问题

Q: 和那些动辄几十 KB 的星空库有什么区别？ 本组件是粤喵自研的原生实现，核心代码约 50 行，无依赖、无配置项学习成本；而第三方库通常附带大量用不到的 API，体积是我们的几十倍。

Q: 想让星星变成彩色怎么办？ 修改 cfg.color 为单一颜色即可；想要每颗星颜色不同，把 cfg.color 替换成一个调色板数组，在 init() 里为每颗星星随机取色。

Q: 可以做流星效果吗？ 可以。在 stars 数组中定期插入一个「流星」对象（高速度、拖尾），绘制时沿运动方向画一条渐隐的线段即可，参考上方代码结构自行扩展。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创，免费商用无需署名；也欢迎在评论区分享你的魔改版本。