js实现烟花特效

下面是JS实现烟花特效的完整攻略：

1.实现思路

实现Canvas画布，用于绘制烟花效果；
生成烟花粒子，通过动画实现烟花特效。

2.代码实现

2.1 创建Canvas画布

创建一个id为firework的画布，用于绘制烟花特效。

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

// 获取画布元素
var canvas = document.getElementById("firework");

// 获取画布上下文，设置画布宽高
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

2.2 生成烟花粒子

通过动画循环生成烟花粒子，包括烟花弹和爆炸效果。

// 定义粒子类
function Particle() {
  // 弹出初始化坐标点
  this.x = Math.random() * canvas.width;
  this.y = Math.random() * canvas.height;
  // 控制速度和方向
  this.speed = 2;
  this.directionX = Math.random() * 1 - 0.5;
  this.directionY = Math.random() * 1 - 0.5;
  // 定义粒子颜色
  this.color = "#ffffff";
  // 定义粒子半径
  this.radius = Math.random() * 3;
}

// 定义绘制粒子方法
Particle.prototype.draw = function () {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
  ctx.fillStyle = this.color;
  ctx.fill();
};

// 定义更新粒子方法
Particle.prototype.update = function () {
  // 控制粒子速度和方向
  this.x += this.directionX * this.speed;
  this.y += this.directionY * this.speed;
  // 控制烟花爆炸效果
  if (this.radius > 0.1) {
    this.radius -= 0.1;
  } else {
    this.radius = 0;
  }
};

// 定义烟花爆炸方法
function explode() {
  // 初始化粒子数组，生成爆炸后的粒子
  var particles = [];
  for (var i = 0; i < 30; i++) {
    var particle = new Particle();
    particles.push(particle);
  }

  // 循环执行粒子更新方法
  function loop() {
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < particles.length; i++) {
      particles[i].draw();
      particles[i].update();
    }

    requestAnimationFrame(loop);
  }

  // 执行动画循环
  loop();
}

// 定义烟花弹生成方法
function firework() {
  // 初始化烟花弹坐标
  var x = Math.random() * canvas.width;
  var y = canvas.height;

  // 循环执行烟花弹更新方法
  function loop() {
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    var particle = new Particle();
    particle.x = x;
    particle.y = y;
    particle.color = "#"+((1<<24)*Math.random()|0).toString(16);

    particle.draw();
    particle.update();

    if (particle.radius == 0) {
      explode();
    } else {
      requestAnimationFrame(loop);
    }
  }

  // 执行动画循环
  loop();
}

2.3 初始化并执行烟花特效

初始化烟花特效，并执行动画循环，随机生成不同颜色的烟花弹效果。

// 初始化播放烟花特效，每隔1秒执行一次
function playFirework() {
  window.setInterval(firework, 1000);  
}
playFirework();

3. 示例说明

下面是两条示例说明：

3.1 示例1

这个示例是通过烟花特效实现一个简单的动态背景，不同的颜色和大小的烟花弹交替出现，让页面更加生动有趣。

<html>
  <head>
    <title>烟花特效示例</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      canvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <canvas id="firework"></canvas>
    <script>
      var canvas = document.getElementById("firework");
      var ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function Particle() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;

        this.speed = 2;
        this.directionX = Math.random() * 1 - 0.5;
        this.directionY = Math.random() * 1 - 0.5;

        this.color = "#ffffff";
        this.radius = Math.random() * 3;
      }

      Particle.prototype.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      };

      Particle.prototype.update = function () {
        this.x += this.directionX * this.speed;
        this.y += this.directionY * this.speed;

        if (this.radius > 0.1) {
          this.radius -= 0.1;
        } else {
          this.radius = 0;
        }
      };

      function explode() {
        var particles = [];
        for (var i = 0; i < 30; i++) {
          var particle = new Particle();
          particles.push(particle);
        }

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

          for (var i = 0; i < particles.length; i++) {
            particles[i].draw();
            particles[i].update();
          }

          requestAnimationFrame(loop);
        }

        loop();
      }

      function firework() {
        var x = Math.random() * canvas.width;
        var y = canvas.height;

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

          var particle = new Particle();
          particle.x = x;
          particle.y = y;
          particle.color = "#"+((1<<24)*Math.random()|0).toString(16);

          particle.draw();
          particle.update();

          if (particle.radius == 0) {
            explode();
          } else {
            requestAnimationFrame(loop);
          }
        }

        loop();
      }

      function playFirework() {
        window.setInterval(firework, 1000);  
      }

      playFirework();
    </script>
  </body>
</html>

3.2 示例2

这个示例是在Vue.js框架中嵌入烟花特效，当点击页面上的按钮时，才会出现烟花特效，提供更好的用户体验。

<template>
  <div>
    <button @click="playFirework()">点击播放</button>
    <canvas id="firework"></canvas>
  </div>
</template>

<script>
export default {
  name: "Firework",
  data() {
    return {};
  },
  methods: {
    playFirework() {
      var canvas = document.getElementById("firework");
      var ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      function Particle() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;

        this.speed = 2;
        this.directionX = Math.random() * 1 - 0.5;
        this.directionY = Math.random() * 1 - 0.5;

        this.color = "#ffffff";
        this.radius = Math.random() * 3;
      }

      Particle.prototype.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      };

      Particle.prototype.update = function () {
        this.x += this.directionX * this.speed;
        this.y += this.directionY * this.speed;

        if (this.radius > 0.1) {
          this.radius -= 0.1;
        } else {
          this.radius = 0;
        }
      };

      function explode() {
        var particles = [];
        for (var i = 0; i < 30; i++) {
          var particle = new Particle();
          particles.push(particle);
        }

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

          for (var i = 0; i < particles.length; i++) {
            particles[i].draw();
            particles[i].update();
          }

          requestAnimationFrame(loop);
        }

        loop();
      }

      function firework() {
        var x = Math.random() * canvas.width;
        var y = canvas.height;

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

          var particle = new Particle();
          particle.x = x;
          particle.y = y;
          particle.color = "#"+((1<<24)*Math.random()|0).toString(16);

          particle.draw();
          particle.update();

          if (particle.radius == 0) {
            explode();
          } else {
            requestAnimationFrame(loop);
          }
        }

        loop();
      }

      window.setInterval(firework, 1000);
    },
  },
};
</script>

<style>
canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现烟花特效 - Python技术站

1.实现思路

2.代码实现

3. 示例说明

相关文章