当前位置：首页 > JavaScript

js实现星空

2026-02-01 12:56:59JavaScript

使用Canvas绘制星空效果

在JavaScript中实现星空效果可以通过HTML5的Canvas元素结合随机生成星星的坐标和大小来完成。以下是一个基础的实现方法：

const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');

// 设置canvas尺寸为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 星星数组
const stars = [];

// 初始化星星
function initStars() {
  for (let i = 0; i < 200; i++) {
    stars.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 1.5,
      speed: Math.random() * 0.2,
      alpha: Math.random()
    });
  }
}

// 绘制星星
function drawStars() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'white';

  stars.forEach(star => {
    ctx.globalAlpha = star.alpha;
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
    ctx.fill();

    // 移动星星
    star.y += star.speed;

    // 如果星星超出底部边界，重置到顶部
    if (star.y > canvas.height) {
      star.y = 0;
      star.x = Math.random() * canvas.width;
    }
  });

  requestAnimationFrame(drawStars);
}

// 窗口大小改变时重设canvas尺寸
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

initStars();
drawStars();

添加闪烁效果

让星星随机闪烁可以增强真实感：

function drawStars() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'white';

  stars.forEach(star => {
    // 随机改变透明度实现闪烁
    if (Math.random() < 0.01) {
      star.alpha = Math.random();
    }

    ctx.globalAlpha = star.alpha;
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
    ctx.fill();

    star.y += star.speed;

    if (star.y > canvas.height) {
      star.y = 0;
      star.x = Math.random() * canvas.width;
    }
  });

  requestAnimationFrame(drawStars);
}

添加不同大小的星星

创建不同大小的星星可以增加视觉效果层次感：

js实现星空

function initStars() {
  for (let i = 0; i < 300; i++) {
    const radius = Math.random() * 3;
    stars.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: radius,
      speed: radius * 0.1,  // 较大的星星移动更快
      alpha: Math.random()
    });
  }
}

完整的HTML结构

<!DOCTYPE html>
<html>
<head>
  <title>星空效果</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="starCanvas"></canvas>
  <script>
    // 上面的JavaScript代码放在这里
  </script>
</body>
</html>

这个实现创建了一个基本的星空效果，包含随机分布的星星、星星移动和闪烁效果。可以通过调整星星数量、大小范围和移动速度来获得不同的视觉效果。