当前位置：首页 > JavaScript

js实现星空

2026-04-06 05:45:35JavaScript

以下是使用JavaScript实现星空效果的几种方法，结合HTML5 Canvas和CSS动画技术：

使用Canvas绘制星空

创建Canvas元素并初始化：

<canvas id="starCanvas"></canvas>

JavaScript实现代码：

js实现星空

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

// 设置Canvas为全屏
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 生成星星数组
const stars = Array(200).fill().map(() => ({
  x: Math.random() * canvas.width,
  y: Math.random() * canvas.height,
  size: Math.random() * 3,
  speed: Math.random() * 0.2
}));

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  stars.forEach(star => {
    ctx.beginPath();
    ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
    ctx.fillStyle = 'white';
    ctx.fill();

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

  requestAnimationFrame(animate);
}

animate();

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

使用CSS动画实现星空

HTML结构：

<div class="stars-container"></div>

CSS样式：

js实现星空

.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration) infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

JavaScript生成星星：

const container = document.querySelector('.stars-container');
const starCount = 200;

for (let i = 0; i < starCount; i++) {
  const star = document.createElement('div');
  star.classList.add('star');

  const size = Math.random() * 3;
  star.style.width = `${size}px`;
  star.style.height = `${size}px`;
  star.style.left = `${Math.random() * 100}%`;
  star.style.top = `${Math.random() * 100}%`;
  star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);

  container.appendChild(star);
}

添加流星效果

在Canvas版本中增加流星：

// 流星对象
const shootingStar = {
  x: 0,
  y: 0,
  size: 3,
  speed: 5,
  angle: Math.PI / 4,
  length: 100,
  active: false
};

function createShootingStar() {
  shootingStar.x = Math.random() * canvas.width;
  shootingStar.y = -20;
  shootingStar.angle = Math.random() * Math.PI / 4 + Math.PI / 8;
  shootingStar.active = true;
}

// 在animate函数中添加
if (shootingStar.active) {
  ctx.beginPath();
  ctx.moveTo(shootingStar.x, shootingStar.y);
  ctx.lineTo(
    shootingStar.x - Math.cos(shootingStar.angle) * shootingStar.length,
    shootingStar.y + Math.sin(shootingStar.angle) * shootingStar.length
  );
  ctx.lineWidth = shootingStar.size;
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
  ctx.stroke();

  shootingStar.x += Math.cos(shootingStar.angle) * shootingStar.speed;
  shootingStar.y += Math.sin(shootingStar.angle) * shootingStar.speed;

  if (shootingStar.y > canvas.height) {
    shootingStar.active = false;
    setTimeout(createShootingStar, Math.random() * 3000 + 2000);
  }
} else if (Math.random() < 0.001) {
  createShootingStar();
}

这些方法可以单独使用或组合使用，Canvas版本适合需要动态交互的场景，CSS版本性能开销更小适合静态背景。流星效果可以增强视觉冲击力，所有代码都考虑了响应式设计，会自动适应窗口大小变化。