likes
comments
collection
share

大神手把手教你如何用代码生成简单的动态烟花

作者站长头像
站长
· 阅读数 42

Step 1: 创建一个 HTML 文件并设置一个画布

首先，我们需要在 HTML 文件中创建一个画布。我们可以使用 元素或 元素创建它，并为其设置一些基本样式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fireworks Animation</title>
    <style>
      canvas {
        width: 100%;
        height: 100%;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script src="app.js"></script>
  </body>
</html>

Step 2: 创建画布上下文

接着，我们将创建画布的上下文用于在画布上绘制我们的烟花。

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

Step 3: 绘制烟花

现在，我们将开始绘制烟花。我们将使用一些简单的绘图API来创建圆形和线条，并使用一些数学计算来决定烟花的运动路径和形状。

在此示例中，我们将创建一个名为“Firework”的对象，该对象包含有关烟花的所有信息。每次我们绘制烟花时，我们将创建一个新的“Firework”对象。

class Firework {
  constructor() {
    this.x = canvas.width / 2;
    this.y = canvas.height;
    this.speed = Math.random() * 5 + 5;
    this.angle = Math.random() * Math.PI * 2;
    this.vx = Math.sin(this.angle) * this.speed;
    this.vy = Math.cos(this.angle) * this.speed * -1;
    this.color = `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
    this.brightness = Math.random() * 80 + 20;
    this.radius = Math.random() * 2 + 2;
    this.life = false;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += 0.1;
    this.radius -= 0.05;
    this.brightness -= 2;
    if (this.brightness < 0) {
      this.life = true;
    }
  }
}

我将解释一下Firework对象中的每个属性和方法。

  1. this.x和this.y存储烟花的当前位置。
  2. this.speed 是它的速度
  3. this.angle 是烟花的发射角度。我们将它随机设置为 Math.PI * 2 ， 这使烟花能在任何方向上飞行。
  4. 通过使用 Math.sin() 和 Math.cos() 来将速度转换为X和Y轴上的速度 this.vx 和 this.vy。
  5. 还有一个随机颜色this.color，和一个随机大小的this.radius。
  6. this.brightness用于储存烟花的当前亮度，并随时间推移减少，以使烟花逐渐消失，使动画更加逼真。
  7. 当烟花的 this.brightness 减少到接近零时，我们将 this.life 设置为 true ，表示烟花可以被销毁并从对象数组中删除。

在 draw()方法中，我们使用 ctx.beginPath() 开始绘制烟花，并在其中心创建一个圆形，然后填充它的颜色。

在update()方法中，我们移动烟花的当前位置，使其“爆炸”并减少亮度。

Step 4: 创建一个烟花环境

现在，我们将创建一个包含多个烟花对象的环境，并使其按照特定的频率和规律发生爆炸。

const fireworks = [];

function createFirework() {
  const x = Math.random() * canvas.width;
  const y = canvas.height;
  const firework = new Firework();
  firework.x = x;
  fireworks.push(firework);
}

setInterval(createFirework, 100);

function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  fireworks.forEach((firework, index) => {
    firework.draw();
    firework.update();
    if (firework.life) {
      fireworks.splice(index, 1);
    }
  });
  requestAnimationFrame(animate);
}

animate();

首先，我们将手动创建一个名为fireworks的空数组以存储多个Firework对象。

接下来，我们创建一个名为 createFirework()的函数，该函数将在特定间隔内创建随机位置的烟花。在这种情况下，我们将每100毫秒创建一次烟花。

在animate()函数中，我们首先使用 ctx.fillStyle 清除画布，并在其中创建一个半透明的黑色矩形。这有助于创建动画效果。

然后，我们遍历 fireworks 数组中的每个 Firework 对象，并依次调用其 draw() 和 update() 方法。如果烟花可以从数组中删除，则将其删除。

最后，我们使用 requestAnimationFrame() 将 animate() 函数设为递归，这样它将每帧执行一次，从而创造出流畅而美丽的动画效果。

完整代码：

class Firework {
  constructor() {
    this.x = canvas.width / 2;
    this.y = canvas.height;
    this.speed = Math.random() * 5 + 5;
    this.angle = Math.random() * Math.PI * 2;
    this.vx = Math.sin(this.angle) * this.speed;
    this.vy = Math.cos(this.angle) * this.speed * -1;
    this.color = `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
    this.brightness = Math.random() * 80 + 20;
    this.radius = Math.random() * 2 + 2;
    this.life = false;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += 0.1;
    this.radius -= 0.05;
    this.brightness -= 2;
    if (this.brightness < 0) {
      this.life = true;
    }
  }
}

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const fireworks = [];

function createFirework() {
  const x = Math.random() * canvas.width;
  const y = canvas.height;
  const firework = new Firework();
  firework.x = x;
  fireworks.push(firework);
}

setInterval(createFirework, 100);

function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  fireworks.forEach((firework, index) => {
    firework.draw();
    firework.update();
    if (firework.life) {
      fireworks.splice(index, 1);
    }
  });
  requestAnimationFrame(animate);
}

animate();
转载自:https://juejin.cn/post/7226722753666416701
评论
请登录