炫酷星空js

“炫酷星空”通常指的是一种视觉效果，模拟夜空中繁星闪烁的动画或交互式展示。这种效果在前端开发中很受欢迎，尤其是在网站或应用的背景或加载页面中使用。以下是关于“炫酷星空”JS实现的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案：

基础概念

HTML5 Canvas：用于在网页上绘制图形和动画。
JavaScript：用于控制Canvas上的绘图逻辑和动画效果。
CSS3：有时与JavaScript结合使用，增强视觉效果和布局。

优势

视觉吸引力：星空效果能增加网站的趣味性和美观度。
交互性：用户可以与星空互动，如点击星星产生反应。
加载动画：作为页面加载时的过渡动画，提升用户体验。

类型

静态星空：固定的星星图案。
动态星空：星星闪烁、移动或形成特定图案。
交互式星空：用户操作触发星星变化。

应用场景

网站背景：为网站增添神秘和浪漫的氛围。
游戏界面：模拟宇宙或太空主题的游戏环境。
应用启动画面：作为应用的欢迎动画。

示例代码（动态星空）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>炫酷星空</title>
<style>
  body, canvas {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
  }
</style>
</head>
<body>
<canvas id="starfield"></canvas>
<script>
  const canvas = document.getElementById('starfield');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  class Star {
    constructor() {
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;
      this.size = Math.random() * 2;
      this.speed = Math.random() * 0.05;
    }
    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fillStyle = 'white';
      ctx.fill();
    }
    update() {
      this.y += this.speed;
      if (this.y > canvas.height) {
        this.y = 0;
        this.x = Math.random() * canvas.width;
      }
    }
  }

  const stars = [];
  for (let i = 0; i < 100; i++) {
    stars.push(new Star());
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    stars.forEach(star => {
      star.draw();
      star.update();
    });
    requestAnimationFrame(animate);
  }

  animate();

  window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  });
</script>
</body>
</html>