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

js实现烟花特效

• JavaScript
yizhihongxing

下面是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日

相关文章

  • js简单时间比较的方法

    首先，我们需要明确需求：在前端页面中，实现两个时间的比较，判断哪一个时间是更早或更晚。具体思路是将两个时间字符串转换成Date对象，然后比较两个Date对象的时间戳大小。 以下是具体实现步骤和示例说明： 步骤一：将时间字符串转换成Date对象 我们可以借助JS内置的Date对象来实现时间字符串到Date对象的转换，具体代码如下： let timeStr = …

    JavaScript 2023年5月27日
    00

  • 用python制作个音乐下载器

    制作一个音乐下载器需要完成以下几个步骤： 步骤一：确定下载的音乐网站 首先要确定下载的音乐网站，一般常见的网站包括QQ音乐、酷狗音乐、网易云音乐等。不同的网站采取的下载方式可能有所不同，因此需要先确定目标网站的下载方式。 步骤二：分析目标网站的下载方式 对于不同的网站，其下载方式可能存在差异，因此需要使用网络爬虫对网站进行分析，找到下载音乐的方式。常见的方案…

    JavaScript 2023年5月28日
    00

  • javascript ajax的5种状态介绍

    下面来详细讲解“JavaScript Ajax的5种状态介绍”的完整攻略。 什么是Ajax Ajax，全称Asynchronous JavaScript and XML，是指一种创建交互式，动态的Web应用程序的Web开发技术。它使得Web页面和服务器之间异步通信变得更加轻松和高效。 在Web中，Ajax最常用的场景是使用JavaScript进行异步请求并更…

    JavaScript 2023年6月11日
    00

  • 简单谈谈javascript高级特性

    简单谈谈Javascript高级特性 1. 闭包 1.1 什么是闭包 闭包是指有权访问另一个函数作用域中变量的函数，常用来创建私有变量和方法，还可以用来实现函数柯里化等。 1.2 闭包的使用场景 1.2.1 创建私有变量和方法 function counter() { var count = 0; return { increment: function()…

    JavaScript 2023年6月10日
    00

  • JavaScript数组reduce()方法使用实例详解

    JavaScript数组reduce()方法使用实例详解 在JavaScript中，数组reduce()方法是一种非常有用的方法，它可以将数组中的元素累加到一起，从而得到一个最终的结果。本文将详细介绍reduce()方法的使用方法，并通过示例说明它的用法。 reduce()方法的语法 reduce()方法是数组对象的一个方法，它可以接收两个参数，第一个参数是…

    JavaScript 2023年5月27日
    00

  • Javascript中构造函数要注意的一些坑

    下面是Javascript中构造函数要注意的一些坑的完整攻略。 1. 构造函数的概念 在Javascript中，构造函数是一种特殊的函数，用来创建对象，它与普通函数在语法上没有区别，但是它的调用方式和作用有所不同。构造函数通常以大写字母开头，这是为了与普通函数区分开来。 2. 构造函数的使用 使用构造函数创建对象的方法很简单，只需要在函数内部使用this关键…

    JavaScript 2023年5月18日
    00

  • Js视频播放器插件Video.js使用方法详解

    Js视频播放器插件Video.js使用方法详解 简介 Video.js是一个开源的JavaScript库，用于在不同的浏览器和设备上播放HTML5视频和音频。它具有许多功能，包括自定义外观，广告插入，播放列表，字幕和音频曲目等。 在本篇教程中，我们将详细介绍Video.js的使用方法，并提供一些示例说明。 安装 首先，你需要从Video.js官网下载库文件。…

    JavaScript 2023年6月11日
    00

  • JavaScript实现抖音罗盘时钟

    下面我将详细讲解如何用JavaScript实现抖音罗盘时钟。 准备工作 在编写JavaScript代码之前，我们需要先准备好HTML和CSS文件。HTML文件中包含了页面布局的基本结构，CSS文件中定义了页面对应的样式。具体代码如下： <!DOCTYPE html> <html lang="en"> <hea…

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