<canvas id="particleCanvas"></canvas>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background: #000;
  }
  canvas {
    display: block;
  }
</style>
<script>
  const canvas = document.getElementById('particleCanvas');
  const ctx = canvas.getContext('2d');
<p>// 设置画布尺寸为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
</script></p>

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 5 + 1;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
    this.color = 'rgba(255, 255, 255, 0.8)';
  }
<p>update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.05; // 粒子逐渐缩小
}</p><p>draw(context) {
context.fillStyle = this.color;
context.beginPath();
context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
context.fill();
}
}</p>