web实现星空粒子效果

要实现星空粒子效果，可以使用以下步骤：

1. 创建一个 `canvas` 元素，并设置其宽度和高度为浏览器窗口的宽度和高度。

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

canvas {
  width: 100vw;
  height: 100vh;
}

2. 使用 JavaScript 创建 `canvas` 元素的上下文对象，并设置其样式属性。

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

ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

3. 创建一个 `Particle` 类，用于创建和更新粒子的位置和速度。

class Particle {
  constructor(x, y, vx, vy, radius) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.radius = radius;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
  }
}

4. 创建多个随机位置、速度和大小的粒子，并在每一帧更新它们的位置。

const particles = [];

for (let i = 0; i < 100; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const vx = (Math.random() - 0.5) * 2;
  const vy = (Math.random() - 0.5) * 2;
  const radius = Math.random() * 2;

  particles.push(new Particle(x, y, vx, vy, radius));
}

function update() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (const particle of particles) {
    particle.update();

    ctx.beginPath();
    ctx.fillStyle = '#FFFFFF';
    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
    ctx.fill();
  }

  requestAnimationFrame(update);
}

update();

这样就可以实现一个简单的星空粒子效果了。你可以根据自己的需求调整粒子的数量、颜色、大小等参数。