绚烂天空：用JavaScript在画布上模拟雷电

2023-10-21 14:11:13

用 JavaScript 和 Canvas 模拟夏日的闪电

想象一下，在夏日的傍晚，闪电划破天空，留下令人惊叹的光迹。那种原始的能量和美丽令人着迷。现在，让我们借助 JavaScript 和 Canvas 的力量，将这种大自然的奇观带到我们的数字世界中。

创建闪电画布

就像艺术家需要画布一样，我们的闪电也需要一个舞台。我们用 JavaScript 创建一个 <canvas> 元素，它将成为我们闪电的容器。

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

描绘闪电的形状

闪电不是简单的线条，而是一系列不规则的线段。我们将使用随机函数生成一系列随机点，并用线段将它们连接起来，形成闪电的形状。

function generateLightningPoints(numPoints) {
  const points = [];
  for (let i = 0; i < numPoints; i++) {
    points.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height
    });
  }
  return points;
}

function drawLightning(points) {
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.stroke();
}

增添真实感

为了让闪电看起来更真实，我们加入了一些随机因素。线段的长度、宽度和颜色都会随机变化，让闪电更具动态感和不确定性。

function randomizeLightning() {
  const numPoints = Math.floor(Math.random() * 10) + 5;
  const points = generateLightningPoints(numPoints);
  const lineWidth = Math.random() * 5 + 1;
  const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  drawLightning(points);
}