引言

在浏览邻居「风信子博客」的博客，其背景效果比较让我喜欢，该设计巧妙融合了macOS Mojave系统自带的沙漠壁纸与星空动画元素。受此启发，我决定复现一套兼具视觉协调性的网页背景方案。

1. 视觉层： 以Mojave经典渐变沙漠为基底，通过HTML5 Canvas实现星轨流动与流星划过的粒子动画效果，形成动静结合的视觉层次；
2. 交互层： 严格限定动画渲染区域为视口上半部分，使其与背景图自带的星空元素形成空间呼应，避免全屏动画可能导致的视觉过载；

macOS Mojave壁纸图片

一、完整JavaScript实现代码

/**
 * 星空动画核心控制器
 * 功能：创建上半屏动态星空+彗星特效
 * 版本：v2.1
 */
function initUniverseAnimation() {
  // 环境检测
  if (typeof window === 'undefined' || typeof document === 'undefined') return;
  if (/(iPhone|iPod|Android|ios|iPad)/i.test(navigator.userAgent)) return;

  // 画布初始化
  const canvas = document.getElementById("universe");
  if (!canvas) return;
  const ctx = canvas.getContext("2d");
  
  // 动态参数
  let width = window.innerWidth;
  let height = window.innerHeight;
  const visibleHeight = height * 0.5;
  let stars = [];
  let isInitializing = true;

  // 高清屏适配（解决模糊问题）
  const dpr = window.devicePixelRatio || 1;
  canvas.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: ${width}px;
    height: ${visibleHeight}px;
    pointer-events: none;
    z-index: -1;
  `;
  canvas.width = width * dpr;
  canvas.height = visibleHeight * dpr;
  ctx.scale(dpr, dpr);

  /**
   * 星体构造函数
   * 管理单个星体的运动轨迹和渲染
   */
  function Star() {
    // 初始化属性
    this.reset = function() {
      this.giant = Math.random() < 0.003; // 3‰概率生成巨星
      this.comet = !this.giant && Math.random() < 0.004 && !isInitializing;

      if (this.comet) {
        // 彗星参数
        this.fromLeft = Math.random() < 0.5; // 随机方向
        const baseAngle = this.fromLeft ? 30 : -45;
        this.angle = baseAngle + Math.random() * 15; // 动态角度
        this.speed = 2.2 + Math.random() * 1.8;      // 速度波动
        this.tailLength = 30 + Math.random() * 30;   // 拖尾长度
        
        // 起始位置算法
        this.x = this.fromLeft ? 
          -100 - Math.random() * 50 :    // 左侧起始
          width + 100 + Math.random() * 50; // 右侧起始
        this.y = Math.random() * visibleHeight * 0.9; // Y轴限制
        
        // 运动向量分解
        const rad = this.angle * (Math.PI / 180);
        this.dx = Math.cos(rad) * this.speed * (this.fromLeft ? 1 : -1);
        this.dy = -Math.abs(Math.sin(rad) * this.speed);
      } else {
        // 普通星星参数
        this.x = Math.random() * width;
        this.y = Math.random() * visibleHeight;
        this.dx = 0.08 + Math.random() * 0.25;
        this.dy = -0.08 - Math.random() * 0.25;
      }

      // 通用属性
      this.r = this.comet ? 2.5 : 1 + Math.random() * 1.2;
      this.opacity = 0;
      this.opacityTresh = this.comet ? 0.85 : 0.2 + Math.random() * 0.5;
      this.fadingIn = true;
      this.fadingOut = false;
    };

    // 运动逻辑
    this.move = function() {
      this.x += this.dx;
      this.y += this.dy;

      // 智能边界回收
      if (this.comet) {
        const horizontalBound = this.fromLeft ? 
          this.x > width + this.tailLength : 
          this.x < -this.tailLength;
        if (horizontalBound || this.y < -this.tailLength) this.reset();
      } else {
        if (this.x > width * 1.15 || this.y < -visibleHeight * 0.15) this.reset();
      }
    };

    // 透明度控制
    this.fade = function() {
      if (this.fadingIn) {
        this.opacity += this.comet ? 0.07 : 0.01;
        if (this.opacity >= this.opacityTresh) this.fadingIn = false;
      } else if (!this.comet) {
        this.opacity -= 0.0007;
        if (this.opacity <= 0) this.reset();
      }
    };

    // 渲染方法
    this.draw = function() {
      ctx.beginPath();
      
      if (this.comet) {
        // 绘制彗星头部
        ctx.fillStyle = `rgba(180,220,255,${this.opacity})`;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        
        // 动态拖尾渲染
        for(let t = 0; t < this.tailLength; t++) {
          const progress = t / this.tailLength;
          ctx.fillStyle = `rgba(160,200,255,${this.opacity * (1 - progress * 0.7)})`;
          const offsetX = this.dx * t * 0.6;
          const offsetY = this.dy * t * 0.6;
          ctx.fillRect(
            this.x - offsetX,
            this.y - offsetY,
            this.r * (1 - progress * 0.2),
            this.r * (1 - progress * 0.2)
          );
        }
      } else if (this.giant) {
        // 绘制巨星
        ctx.fillStyle = `rgba(180,184,240,${this.opacity})`;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
      } else {
        // 绘制普通星星
        ctx.fillStyle = `rgba(226,225,142,${this.opacity})`;
        ctx.fillRect(this.x, this.y, this.r, this.r);
      }
      
      ctx.closePath();
      ctx.fill();
    };

    this.reset(); // 初始化
  }

  // 星体生成器
  function createStars() {
    const starCount = Math.floor(width * 0.07); // 密度自适应
    stars = [];
    for(let i = 0; i < starCount; i++) {
      stars.push(new Star());
    }
    setTimeout(() => isInitializing = false, 50); // 初始化保护期
  }

  // 动画循环引擎
  function animate() {
    ctx.clearRect(0, 0, width, visibleHeight);
    
    // 绘制区域裁切
    ctx.save();
    ctx.beginPath();
    ctx.rect(0, 0, width, visibleHeight);
    ctx.clip();
    
    // 逐帧渲染
    stars.forEach(star => {
      star.fade();
      star.move();
      star.draw();
    });
    
    ctx.restore();
    requestAnimationFrame(animate);
  }

  // 自适应窗口变化
  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width * dpr;
      canvas.height = visibleHeight * dpr;
      ctx.scale(dpr, dpr);
      createStars();
    }, 200); // 200ms防抖
  });

  // 启动引擎
  createStars();
  animate();
}

// 自动挂载系统
(function() {
  const init = () => {
    try {
      if (!document.getElementById('universe')) {
        const canvas = document.createElement('canvas');
        canvas.id = 'universe';
        document.body.appendChild(canvas);
      }
      initUniverseAnimation();
    } catch(e) {
      console.error('星空初始化失败:', e);
      setTimeout(init, 1000);
    }
  };

  if (document.readyState === 'complete') {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
    window.addEventListener('load', init);
  }
})();

三、关键实现解析

1. 性能优化体系

   • 动态密度计算：starCount = width * 0.07 根据屏幕宽度自动调整星体数量
   • 对象池模式：星体越界后重置而非销毁重建
   • RAF节流：requestAnimationFrame 保证60FPS流畅度

2. 运动学模型

   // 速度向量分解公式
   dx = cosθ * speed * direction
   dy = -abs(sinθ * speed) // 确保始终向上
   

   通过三角函数精确控制飞行角度，direction实现左右方向切换

3. 视觉增强技术

   • 拖尾衰减算法：opacity * (1 - progress * 0.7)
   • 动态尺寸缩减：r * (1 - progress * 0.2)
   • 高清渲染：devicePixelRatio适配4K屏

四、部署流程

1. 文件创建

   public/
   └── js/
       └── universeAnimation.js  # 粘贴完整JS代码
   

2. HTML引入

   <!DOCTYPE html>
   <html>
   <body>
     <!-- 页面内容 -->
     <script defer src="/js/universeAnimation.js"></script>
   </body>
   </html>
   

五、参数调优表

六、常见问题解决方案

1. 移动端显示异常
   代码已通过UA检测自动禁用，若需启用：

   // 删除此行
   if (/(iPhone|iPod|Android|ios|iPad)/i.test(navigator.userAgent)) return;
   

2. 性能卡顿
   降低starCount系数至0.05，或减少tailLength最大值

3. 边缘切割不自然
   调整CSS中mask-image的85%为更低值

4. Z-index层级冲突
   修改canvas的z-index值高于页面内容

该方案已通过Chrome/Firefox/Safari/Edge全平台测试，可直接用于生产环境。建议结合Intersection Observer实现滚动时自动启停动画，进一步优化性能。