1. Python技术站首页
  2. 其他
  3. JavaScript

js实现烟花特效

• JavaScript

下面是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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 简单通过settimeout看javascript的运行机制

    如何通过 setTimeout 看 JavaScript 的运行机制？ JavaScript 是一门单线程语言。也就是说，在浏览器环境下所有的代码只会在一个线程上执行。而 setTimeout 函数可以进行一定的调度，这也是 JavaScript 事件机制的基础。 那么如何通过 setTimeout 来理解 JavaScript 的运行机制呢？下面是一个详细…

    JavaScript 2023年6月11日
    00

  • JavaScript数组复制详解

    下面是关于JavaScript数组复制的完整攻略。 什么是JavaScript数组复制？ JavaScript中的数组复制是指将一个数组的所有元素拷贝到另一个数组中。数组复制通常涉及到浅拷贝和深拷贝的概念。 如何实现JavaScript数组复制？ 浅拷贝 浅拷贝是指将原数组的元素拷贝到一个新数组中，但这个新数组中的元素仍然指向了原数组中的对象。也就是说，新数…

    JavaScript 2023年5月27日
    00

  • javascript中eval解析JSON字符串

    JavaScript中的eval()函数可以将JSON格式的字符串解析为可操作的JavaScript对象，从而方便地在应用程序中使用。下面就是详细的攻略： 什么是JSON字符串？ JSON（JavaScript对象表示法）是一种轻量级的数据交换格式，用于存储和交换数据。它基于JavaScript语法，但具有更宽泛的应用范围，因为许多编程语言都支持它。 JSO…

    JavaScript 2023年5月27日
    00

  • JS 遍历 json 和 JQuery 遍历json操作完整示例

    下面为你详细讲解JS遍历JSON和jQuery遍历JSON操作的完整攻略。 JS 遍历 JSON 1. 遍历JSON方法 遍历JSON有两种方法：for…in 和 Object.keys()。 2. for…in 遍历JSON for…in 循环可以用于遍历 JSON 对象以及数组： const myObj = { name: "Joh…

    JavaScript 2023年5月27日
    00

  • JavaScript手机振动API

    JavaScript手机振动API可以在移动设备上实现震动控制，让手机产生震动效果。本攻略将详细介绍如何使用JavaScript实现手机振动。 导入API 要使用JavaScript的手机振动API，需要使用Vibration API，该API基于Promise对象，包含两个方法：vibrate()和cancelVibration()。 要使用Vibrati…

    JavaScript 2023年6月11日
    00

  • 基于JavaScript实现大文件上传后端代码实例

    当今互联网上的许多应用程序都需要处理大文件上传的功能。而为了保证数据传输的稳定和安全，常常需要将文件分割成多个小部分并分别上传。下面是基于JavaScript实现大文件上传后端代码实例的完整攻略。 具体步骤 准备工作： 在前端界面上，需要使用File API来打开本地文件，并在文件上传过程中将其转换为二进制流。 “` “` 在后端代码中，需要使用Node…

    JavaScript 2023年5月27日
    00

  • javascript数组的定义及操作实例

    下面就是关于“JavaScript数组的定义及操作实例”的完整攻略。 什么是JavaScript数组？ 在 JavaScript 中，数组是一种特殊的变量，它们用于存储多个值，这些值可以是任何类型的数据，比如整数、字符串、对象等等。JavaScript中的数组是一种无序集合，数组中的元素可以通过索引访问，索引从0开始。 JavaScript数组的定义方式 定…

    JavaScript 2023年5月27日
    00

  • prototype与jquery下Ajax实现的差别

    Prototype和jQuery都是JavaScript的库，提供了各种有用的函数和工具，可以轻松地编写JavaScript代码。Prototype是一个类库，它提供了许多实用的JavaScript函数和对象，其中包含一个Ajax请求，并且使用XMLHttpRequest对象来实现。jQuery是一个快速且精简的JavaScript库，它提供了一组优化的功能…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部