js鼠标星星特效

<canvas id="starCanvas"></canvas>
<script>
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Star {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 3 + 1;
    this.brightness = Math.random();
  }
  draw() {
    ctx.beginPath();
    for (let i = 0; i < 5; i++) {
      ctx.lineTo(
        this.x,
        this.y - this.size * (i === 0 ? 0 : 1.5 - 0.3 * i)
      );
      ctx.lineTo(
        this.x + this.size * (i === 0 ? 1 : 0.5 - 0.3 * i),
        this.y - this.size * (i === 0 ? 0.5 : 1 - 0.3 * i)
      );
    }
    ctx.closePath();
    ctx.fillStyle = `rgba(255, 255, 255, ${this.brightness})`;
    ctx.fill();
  }
}

let stars = [];
for (let i = 0; i < 100; i++) {
  stars.push(new Star(Math.random() * canvas.width, Math.random() * canvas.height));
}

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

canvas.addEventListener('mousemove', (e) => {
  stars.forEach(star => {
    let dx = e.clientX - star.x;
    let dy = e.clientY - star.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    star.brightness = Math.max(0, 1 - distance / 100);
  });
});
</script>