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日

相关文章

  • JS 数组和对象的深拷贝操作示例

    让我来详细讲解一下 “JS 数组和对象的深拷贝操作示例”的完整攻略。 什么是深拷贝？ 在 JavaScript 中，对象和数组是非常常用的数据类型，而涉及到对象和数组的拷贝时，我们通常有两种方式，分别是浅拷贝和深拷贝。 浅拷贝指的是将原对象的引用赋值给目标对象，即两个对象指向同一个内存地址，所以修改一个对象会影响到另一个对象。而深拷贝则是将原对象完全复制一份…

    JavaScript 2023年5月27日
    00

  • React Native中NavigatorIOS组件的简单使用详解

    下面我来详细讲解“React Native中NavigatorIOS组件的简单使用详解”的完整攻略。 什么是NavigatorIOS组件 NavigatorIOS是React Native中的一个内置组件，它提供了一个iOS导航栏，使我们的应用程序在iOS设备上更加便捷，用户可以轻松地在应用程序的页面之间进行导航操作。 如何在React Native中使用N…

    JavaScript 2023年6月11日
    00

  • JavaScript返回0-1之间随机数的方法

    当我们需要获取0-1之间的随机数时，可以使用JavaScript提供的Math对象的随机函数进行实现。具体实现方式如下： 方法1 Math.random() 使用Math.random()方法可以获取0-1之间的随机数，具体实现代码如下： function getRandom() { return Math.random(); } 使用示例： console…

    JavaScript 2023年6月10日
    00

  • 详解原生JavaScript实现jQuery中AJAX处理的方法

    以下是我对“详解原生JavaScript实现jQuery中AJAX处理的方法”的完整攻略： 什么是AJAX AJAX是Asynchronous JavaScript and XML的缩写，是一种通过JavaScript发送异步HTTP请求进行数据交互的技术。 原生JavaScript实现AJAX XMLHTTPRequest 在原生JavaScript中使用…

    JavaScript 2023年6月11日
    00

  • 在JavaScript中使用JSON数据

    在JavaScript中使用JSON数据的完整攻略包括以下几个步骤： 1.了解JSON格式 JSON（JavaScript Object Notation）是一种格式化和交换数据的格式，使用键值对的方式来表示数据，并使用大括号包裹数据。示例： { "name": "张三", "age": 18, &…

    JavaScript 2023年5月27日
    00

  • 使用webstorm进行javascript的Debug调试功能

    以下是详细讲解使用WebStorm进行JavaScript Debug调试功能的完整攻略： 约定 在本攻略中，我们使用WebStorm Version 2020.3.2，并假设你已经安装和配置好了WebStorm IDE。同时，我们使用以下的JavaScript代码示例： function sum(a, b) { return a + b; } consol…

    JavaScript 2023年6月11日
    00

  • Javascript中的匿名函数与封装介绍

    Javascript中的匿名函数与封装介绍 Javascript中的匿名函数和封装是两个非常重要的概念。使用匿名函数可以避免全局变量污染，而封装则可以保护代码，避免不必要的干扰和修改。本文将详细讲解Javascript中的匿名函数和封装，以及如何使用它们来提高你的代码质量和安全性。 匿名函数 匿名函数是Javascript中的一种特殊函数，它没有函数名，只有…

    JavaScript 2023年5月27日
    00

  • js promise 中使用 setTimeout 实现暂停执行的效果

    下面是使用 JavaScript Promise 和 setTimeout 实现暂停执行的攻略。 理解 Promise 在介绍 Promise 怎样结合 setTimeout 实现暂停执行的方法前，我们需要先理解 Promise 的基本概念。 Promise 是异步编程的一种解决方案，它代表了一个异步操作的最终完成或失败状态，并且提供了一组用于处理状态变化的…

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