当前位置：首页 > JavaScript

js实现流星

2026-04-06 07:40:48JavaScript

实现流星效果的JavaScript代码

使用HTML5 Canvas和JavaScript可以轻松实现流星效果。以下是一个简单的实现方法：

// 获取Canvas元素和上下文
const canvas = document.getElementById('meteorCanvas');
const ctx = canvas.getContext('2d');

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

// 流星对象
class Meteor {
  constructor() {
    this.reset();
  }

  reset() {
    this.x = Math.random() * canvas.width;
    this.y = -20;
    this.speed = 2 + Math.random() * 5;
    this.size = 1 + Math.random() * 3;
    this.length = 5 + Math.random() * 15;
    this.angle = Math.random() * Math.PI / 4;
  }

  update() {
    this.x += Math.sin(this.angle) * this.speed;
    this.y += Math.cos(this.angle) * this.speed;

    if (this.y > canvas.height || this.x > canvas.width || this.x < 0) {
      this.reset();
    }
  }

  draw() {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(
      this.x - Math.sin(this.angle) * this.length,
      this.y - Math.cos(this.angle) * this.length
    );
    ctx.lineWidth = this.size;
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    ctx.stroke();
  }
}

// 创建多个流星
const meteors = [];
for (let i = 0; i < 10; i++) {
  meteors.push(new Meteor());
}

// 动画循环
function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  meteors.forEach(meteor => {
    meteor.update();
    meteor.draw();
  });

  requestAnimationFrame(animate);
}

animate();

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

HTML部分

需要在HTML中添加Canvas元素：

<!DOCTYPE html>
<html>
<head>
    <title>流星效果</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="meteorCanvas"></canvas>
    <script src="meteor.js"></script>
</body>
</html>