萤火虫起舞，代码点亮夏夜之美

2023-10-13 18:24:27

在繁星点点之下，一抹抹灵动的光芒划过夜空，那是夏夜中精灵般的萤火虫。虽然城市中的喧嚣掩盖了它们的光辉，但我们依然可以在代码的世界里重现这份浪漫，用技术点亮夏夜之美。

CSS 的画布与 JavaScript 的画笔

实现萤火虫效果，首先需要创建画布和画笔。在 CSS 中，我们可以用 canvas 标签创建画布，而 JavaScript 则提供了一系列方法来操控画布上的元素。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

萤火虫的诞生与移动

每一只萤火虫都是一个动态的光点，我们需要用 JavaScript 为它们赋予生命。通过 setInterval 定时器，我们可以让萤火虫在画布上随机移动。

function createFirefly() {
  return {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    speed: Math.random() * 2 + 1,
    radius: Math.random() * 2 + 1,
    color: "rgba(255, 255, 255, 0.7)",
  };
}

function moveFirefly(firefly) {
  firefly.x += firefly.speed * Math.cos(firefly.angle);
  firefly.y += firefly.speed * Math.sin(firefly.angle);

  if (firefly.x > canvas.width || firefly.x < 0) {
    firefly.angle = Math.PI - firefly.angle;
  }
  if (firefly.y > canvas.height || firefly.y < 0) {
    firefly.angle = -firefly.angle;
  }
}

光点的闪烁与消隐

为了让萤火虫的效果更逼真，我们需要模拟光点的闪烁和消隐。可以通过调整 rgba 颜色值的透明度来实现。

function drawFirefly(firefly) {
  ctx.beginPath();
  ctx.arc(firefly.x, firefly.y, firefly.radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = firefly.color;
  ctx.fill();
}

汇聚萤火虫，打造代码艺术

最后，我们将这些单个的萤火虫汇聚成一个群体，营造出漫天飞舞的壮观景象。

const fireflies = [];

for (let i = 0; i < 50; i++) {
  fireflies.push(createFirefly());
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  fireflies.forEach((firefly) => {
    moveFirefly(firefly);
    drawFirefly(firefly);
  });
  requestAnimationFrame(draw);
}