js实现闪电

实现闪电效果的方法

使用Canvas绘制闪电效果是一种常见的方式。以下是一个简单的实现示例：

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

function drawLightning(x1, y1, x2, y2, displacement) {
  if (displacement < 2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    ctx.lineWidth = 1;
    ctx.stroke();
    return;
  }

  const midX = (x1 + x2) / 2;
  const midY = (y1 + y2) / 2;
  const newMidX = midX + (Math.random() - 0.5) * displacement;
  const newMidY = midY + (Math.random() - 0.5) * displacement;

  drawLightning(x1, y1, newMidX, newMidY, displacement / 2);
  drawLightning(x2, y2, newMidX, newMidY, displacement / 2);
}

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

  const startX = Math.random() * canvas.width;
  const startY = 0;
  const endX = Math.random() * canvas.width;
  const endY = canvas.height;

  drawLightning(startX, startY, endX, endY, 30);

  requestAnimationFrame(animate);
}

animate();

优化闪电效果

为了使闪电效果更加真实，可以添加以下优化：

• 增加闪电分支
• 使用渐变颜色
• 添加闪光效果

function drawAdvancedLightning(x1, y1, x2, y2, displacement, branches = 0) {
  if (displacement < 2) {
    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
    gradient.addColorStop(1, 'rgba(100, 150, 255, 0.7)');

    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = gradient;
    ctx.lineWidth = 1.5;
    ctx.stroke();
    return;
  }

  const midX = (x1 + x2) / 2;
  const midY = (y1 + y2) / 2;
  const newMidX = midX + (Math.random() - 0.5) * displacement;
  const newMidY = midY + (Math.random() - 0.5) * displacement;

  drawAdvancedLightning(x1, y1, newMidX, newMidY, displacement / 2, branches);
  drawAdvancedLightning(x2, y2, newMidX, newMidY, displacement / 2, branches);

  if (branches > 0 && Math.random() > 0.7) {
    const branchX = newMidX + (Math.random() - 0.5) * displacement * 0.5;
    const branchY = newMidY + (Math.random() - 0.5) * displacement * 0.5;
    drawAdvancedLightning(newMidX, newMidY, branchX, branchY, displacement / 3, branches - 1);
  }
}

添加视觉效果

为了增强闪电的视觉效果，可以添加闪光和震动效果：

let flashAlpha = 0;

function animateWithEffects() {
  // 清除画布
  ctx.fillStyle = `rgba(0, 0, 0, 0.1)`;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 随机生成闪电
  if (Math.random() > 0.95) {
    flashAlpha = 0.8;
    const startX = Math.random() * canvas.width;
    const startY = 0;
    const endX = Math.random() * canvas.width;
    const endY = canvas.height;

    drawAdvancedLightning(startX, startY, endX, endY, 50, 2);
  }

  // 闪光效果
  if (flashAlpha > 0) {
    ctx.fillStyle = `rgba(255, 255, 255, ${flashAlpha})`;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    flashAlpha -= 0.02;
  }

  requestAnimationFrame(animateWithEffects);
}

animateWithEffects();

响应式调整

确保画布尺寸随窗口变化而调整：

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

以上代码创建了一个动态的闪电效果，包含分支、渐变颜色和闪光效果，可以根据需要调整参数以获得不同的视觉效果。