分享几个前端烟花代码

北冰洋以北  金牌会员 | 2024-11-10 09:20:38 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 900|帖子 900|积分 2700

利用caves生成烟花效果

团体计划思路是创建一个动态的烟花效果，通过不断的创建和更新粒子来模拟烟花爆炸和消散的过程。使用canvas举行图形绘制，利用JavaScript的类和对象来管理粒子和烟花的状态，通过requestAnimationFrame实现流畅的动画效果。
分析源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>随机烟花效果</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             padding: 0;
  11.             background: black;
  12.             overflow: hidden;
  13.         }
  14.         canvas {
  15.             display: block;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <canvas id="fireworksCanvas"></canvas>
  21. <script>
  22.     // 获取canvas元素并设置其宽高
  23.     const canvas = document.getElementById('fireworksCanvas');
  24.     const ctx = canvas.getContext('2d');
  26.     canvas.width = window.innerWidth;
  27.     canvas.height = window.innerHeight;
  29.     // 生成随机数
  30.     function random(min, max) {
  31.         return Math.random() * (max - min) + min;
  32.     }
  34.     // 粒子类
  35.     class Particle {
  36.         constructor(x, y, color) {
  37.             this.x = x;
  38.             this.y = y;
  39.             this.color = color;
  40.             this.radius = random(2, 5);// 粒子的半径，随机生成2到5之间
  41.             this.opacity = 1;// 粒子的不透明度
  42.             this.velocity = {// 粒子的速度
  43.                 x: random(-5, 5),
  44.                 y: random(-5, -20)
  45.             };
  46.         }
  48.         // 绘制粒子的方法
  49.         draw() {
  50.             ctx.beginPath();
  51.             ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
  52.             ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.opacity})`;
  53.             ctx.fill();
  54.         }
  56.         // 更新粒子状态的方法
  57.         update() {
  58.             this.x += this.velocity.x;
  59.             this.y += this.velocity.y;
  60.             this.velocity.y += 0.1; // 模拟重力效果
  61.             this.opacity -= 0.01;// 粒子逐渐消失的效果
  62.             this.draw();
  63.         }
  64.     }
  66.     // 烟花类
  67.     class Firework {
  68.         constructor(x, y) {
  69.             this.particles = [];
  70.             const colors = ["255,0,0", "0,255,0", "0,0,255", "255,255,0", "0,255,255", "255,0,255"];
  71.             for (let i = 0; i < 100; i++) {
  72.                 // 创建粒子并赋予随机颜色
  73.                 const color = new Color(parseInt(colors[(Math.random() * colors.length) | 0]), 255, 255);
  74.                 this.particles.push(new Particle(x, y, color));
  75.             }
  76.         }
  78.         // 更新烟花中所有粒子的状态
  79.         update() {
  80.             this.particles.forEach(particle => particle.update());
  81.             this.particles = this.particles.filter(particle => particle.opacity > 0);
  82.         }
  83.     }
  85.     // 颜色类
  86.     class Color {
  87.         constructor(r, g, b) {
  88.             this.r = r;
  89.             this.g = g;
  90.             this.b = b;
  91.         }
  92.     }
  94.     // 存储所有烟花的数组
  95.     let fireworks = [];
  97.     // 触发烟花爆炸的方法
  98.     function explodeFirework() {
  99.         const x = random(0, canvas.width);
  100.         const y = canvas.height;
  101.         fireworks.push(new Firework(x, y));
  102.     }
  104.     // 动画渲染的方法
  105.     function animate() {
  106.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  107.         fireworks.forEach(firework => firework.update());
  108.         fireworks = fireworks.filter(firework => firework.particles.length > 0);
  110.         if (Math.random() < 0.05) { // 有5%的概率触发新的烟花
  111.             explodeFirework();
  112.         }
  114.         // 开始动画循环
  115.         requestAnimationFrame(animate);
  116.     }
  118.     animate();
  119. </script>
  120. </body>
  121. </html>
复制代码
计划思路：


  • 初始化环境：

    • 使用<canvas>元素作为画布，通过JavaScript来绘制烟花效果。
    • 设置画布的宽高为欣赏器窗口的宽高，以便烟花效果能够覆盖整个可视地区。

  • 定义辅助函数和类：

    • random(min, max)：一个简单的辅助函数，用于生成指定范围内的随机数，这在创建烟花效果时用于随机化粒子的属性。
    • Particle类：代表烟花爆炸后产生的单个粒子。粒子具有位置、颜色、巨细、速度和不透明度等属性。
    • Firework类：代表一个完备的烟花，由多个Particle实例组成。
    • Color类：用于存储颜色信息。

  • 创建烟花：

    • 在一个数组fireworks中存储全部烟花实例。
    • 通过explodeFirework函数在画布的随机位置创建一个新的烟花。

  • 动画循环：

    • 使用requestAnimationFrame创建一个动画循环，这个函数会在欣赏器预备好绘制下一帧时调用提供的回调函数。
    • 在每次动画帧中，更新全部烟花的状态，并清除画布上的旧内容。

  • 更新和渲染：

    • 在animate函数中，遍历fireworks数组，更新每个烟花中的粒子状态，并绘制到画布上。
    • 粒子状态更新包括位置的改变、速度的调解（模拟重力）、不透明度的淘汰（模拟烟花逐渐消失的效果）。
    • 移除不透明的粒子，以淘汰盘算量并避免内存泄漏。

代码详细讲授：


  • HTML布局：

    • <canvas id="fireworksCanvas"></canvas>：定义了一个画布元素，用于绘制烟花效果。

  • CSS样式：

    • 设置body和canvas的样式，确保画布覆盖整个窗口，并且没有滚动条。

  • JavaScript代码：
    a. 初始化：
    1. const canvas = document.getElementById('fireworksCanvas');
    2. const ctx = canvas.getContext('2d');
    3. canvas.width = window.innerWidth;
    4. canvas.height = window.innerHeight;
    复制代码

    • 获取画布元素并设置其宽高。
      b. 辅助函数：
    1. function random(min, max) {
    2.     return Math.random() * (max - min) + min;
    3. }
    复制代码
      

    • 生成一个在min和max之间的随机数。
      c. 粒子类：
    1. class Particle {
    2.     // ...
    3. }
    复制代码
      

    • 包含粒子的属性和方法，用于绘制和更新粒子状态。
      d. 烟花类：
    1. class Firework {
    2.     // ...
    3. }
    复制代码
      

    • 包含一个烟花所需的全部粒子，并负责更新它们。
      e. 颜色类：
    1. class Color {
    2.     // ...
    3. }
    复制代码
      

    • 用于表示粒子的颜色。
      f. 动画循环：
    1. function animate() {
    2.     // ...
    3.     requestAnimationFrame(animate);
    4. }
    5. animate();
    复制代码
      

    • 清除画布、更新烟花状态、查抄并触发新的烟花，然后请求下一帧。

接下来分享几个基于以上思路实现的烟花代码：

案例1：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>随机烟花效果</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             padding: 0;
  11.             background: black;
  12.             overflow: hidden;
  13.             display: flex;
  14.             justify-content: center;
  15.             align-items: center;
  16.             height: 100vh;
  17.         }
  18.         canvas {
  19.             display: block;
  20.         }
  21.         #congrats {
  22.             position: absolute;
  23.             top: 50%;
  24.             left: 50%;
  25.             transform: translate(-50%, -50%);
  26.             color: #ff00ff; /* 紫色 */
  27.             font-size: 3em;
  28.             opacity: 0;
  29.             transition: opacity 2s ease-in-out;
  30.             pointer-events: none;
  31.             white-space: nowrap;
  32.             font-family: 'Arial Black', sans-serif;
  33.             text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 75px #ff00ff;
  34.             animation: flash 3s ease-in-out infinite;
  35.         }
  36.         @keyframes flash {
  37.             0%, 100% { opacity: 0; }
  38.             50% { opacity: 1; }
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43. <canvas id="fireworksCanvas"></canvas>
  44. <div id="congrats">文本</div>
  45. <script>
  46.     const canvas = document.getElementById('fireworksCanvas');
  47.     const ctx = canvas.getContext('2d');
  48.     const congrats = document.getElementById('congrats');
  50.     canvas.width = window.innerWidth;
  51.     canvas.height = window.innerHeight;
  53.     function random(min, max) {
  54.         return Math.random() * (max - min) + min;
  55.     }
  57.     function randomColor() {
  58.         return {
  59.             r: Math.floor(random(0, 255)),
  60.             g: Math.floor(random(0, 255)),
  61.             b: Math.floor(random(0, 255))
  62.         };
  63.     }
  65.     class Particle {
  66.         constructor(x, y, color) {
  67.             this.x = x;
  68.             this.y = y;
  69.             this.color = color;
  70.             this.radius = random(2, 5);
  71.             this.opacity = 1;
  72.             this.velocity = {
  73.                 x: random(-5, 5),
  74.                 y: random(-20, -5)
  75.             };
  76.         }
  78.         draw() {
  79.             ctx.beginPath();
  80.             ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
  81.             ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.opacity})`;
  82.             ctx.fill();
  83.         }
  85.         update() {
  86.             this.x += this.velocity.x;
  87.             this.y += this.velocity.y;
  88.             this.velocity.y += 0.1; // gravity
  89.             this.opacity -= 0.01;
  90.             if (this.opacity > 0) {
  91.                 this.draw();
  92.             }
  93.         }
  94.     }
  96.     class Firework {
  97.         constructor(x, y) {
  98.             this.particles = [];
  99.             for (let i = 0; i < 100; i++) {
  100.                 const color = randomColor();
  101.                 this.particles.push(new Particle(x, y, color));
  102.             }
  103.         }
  105.         update() {
  106.             this.particles.forEach(particle => particle.update());
  107.             this.particles = this.particles.filter(particle => particle.opacity > 0);
  108.         }
  109.     }
  111.     let fireworks = [];
  113.     function explodeFirework() {
  114.         const x = random(0, canvas.width);
  115.         const y = canvas.height;
  116.         fireworks.push(new Firework(x, y));
  117.         displayText("写下你想显示的文本");
  118.     }
  120.     function displayText(text) {
  121.         congrats.textContent = text;
  122.         congrats.style.opacity = 1;
  123.         setTimeout(() => {
  124.             congrats.style.opacity = 0;
  125.         }, 2000);
  126.     }
  128.     function animate() {
  129.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  130.         fireworks.forEach(firework => firework.update());
  131.         fireworks = fireworks.filter(firework => firework.particles.length > 0);
  133.         if (Math.random() < 0.05) {
  134.             explodeFirework();
  135.         }
  137.         requestAnimationFrame(animate);
  138.     }
  140.     animate();
  141. </script>
  142. </body>
  143. </html>
复制代码
案例2：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>烟花效果思路原型</title>
  6. <style>
  7.   body, html {
  8.     margin: 0;
  9.     padding: 0;
  10.     overflow: hidden;
  11.     background-color: black;
  12.   }
  13.   .firework {
  14.     position: absolute;
  15.     bottom: 0;
  16.     width: 5px;
  17.     height: 5px;
  18.     background-color: white;
  19.     border-radius: 50%;
  20.   }
  21.   .particle {
  22.     position: absolute;
  23.     border-radius: 50%;
  24.     background-color: white;
  25.   }
  26. </style>
  27. </head>
  28. <body>
  29. <script>
  30.   function launchFirework() {
  31.     const firework = document.createElement('div');
  32.     firework.classList.add('firework');
  33.     firework.style.left = Math.random() * window.innerWidth + 'px';
  34.     document.body.appendChild(firework);
  36.     const height = Math.random() * (window.innerHeight - 100) + 100;
  37.     const duration = Math.random() * 3000 + 2000;
  39.     firework.animate([
  40.       { transform: 'translateY(0px)' },
  41.       { transform: `translateY(-${height}px)` }
  42.     ], {
  43.       duration: duration,
  44.       easing: 'ease-out',
  45.       fill: 'forwards'
  46.     });
  48.     setTimeout(() => {
  49.       explodeFirework(firework, height);
  50.       document.body.removeChild(firework);
  51.     }, duration);
  52.   }
  54.   function explodeFirework(firework, height) {
  55.     const particlesCount = Math.random() * 50 + 20;
  56.     for (let i = 0; i < particlesCount; i++) {
  57.       const particle = document.createElement('div');
  58.       particle.classList.add('particle');
  59.       particle.style.left = firework.offsetLeft + 'px';
  60.       particle.style.bottom = window.innerHeight - height + 'px';
  61.       particle.style.width = particle.style.height = Math.random() * 5 + 'px';
  62.       document.body.appendChild(particle);
  64.       const angle = Math.random() * Math.PI * 2;
  65.       const distance = Math.random() * 100;
  66.       const duration = Math.random() * 2000 + 1000;
  68.       particle.animate([
  69.         { transform: 'translate(0, 0) scale(1)' },
  70.         { transform: `translate(${distance * Math.cos(angle)}px,${distance * Math.sin(angle)}px) scale(0)` }
  71.       ], {
  72.         duration: duration,
  73.         easing: 'ease-out',
  74.         fill: 'forwards'
  75.       });
  77.       setTimeout(() => {
  78.         document.body.removeChild(particle);
  79.       }, duration);
  80.     }
  81.   }
  83.   function randomFireworks() {
  84.     setInterval(() => {
  85.       const delay = Math.random() * 1000;
  86.       setTimeout(launchFirework, delay);
  87.     }, 500);
  88.   }
  90.   randomFireworks();
  91. </script>
  92. </body>
  93. </html>
复制代码
案例3：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>烟花效果原型</title>
  6. <style>
  7.   body, html {
  8.     margin: 0;
  9.     padding: 0;
  10.     overflow: hidden;
  11.   }
  12.   canvas {
  13.     background: black;
  14.   }
  15. </style>
  16. </head>
  17. <body>
  18. <canvas id="fireworks"></canvas>
  19. <script>
  20. // 获取canvas元素并设置其宽高
  21. const canvas = document.getElementById('fireworks');
  22. const ctx = canvas.getContext('2d');
  23. canvas.width = window.innerWidth;
  24. canvas.height = window.innerHeight;
  26. // 烟花粒子类
  27. class Particle {
  28.   constructor(x, y, color) {
  29.     this.x = x;
  30.     this.y = y;
  31.     this.color = color;
  32.     this.velocity = {
  33.       x: (Math.random() - 0.5) * 5,
  34.       y: (Math.random() - 0.5) * 5
  35.     };
  36.     this.alpha = 1;
  37.   }
  39.   draw() {
  40.     ctx.save();
  41.     ctx.globalAlpha = this.alpha;
  42.     ctx.beginPath();
  43.     ctx.fillStyle = this.color;
  44.     ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
  45.     ctx.fill();
  46.     ctx.restore();
  47.   }
  49.   update() {
  50.     this.velocity.y += 0.1; // 加速度模拟重力
  51.     this.x += this.velocity.x;
  52.     this.y += this.velocity.y;
  53.     this.alpha -= 0.015; // 粒子渐隐效果
  55.     // 检查粒子是否超出屏幕
  56.     if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {
  57.       this.alpha = 0; // 将alpha设置为0来移除粒子
  58.     }
  59.   }
  60. }
  62. // 烟花类
  63. class Firework {
  64.   constructor() {
  65.     this.x = Math.random() * canvas.width;
  66.     this.y = canvas.height;
  67.     this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  68.     const maxInitialVelocity = -Math.sqrt(2 * 0.1 * canvas.height); // 最大初始速度
  69.     // 定义最大高度和最小高度
  70.     const maxHeight = 1;
  71.     const minHeight = 0.4;
  73.     this.velocity = {
  74.       x: (Math.random() - 0.5) * 6,
  75.       y: maxInitialVelocity * (Math.random() * (maxHeight - minHeight) + minHeight) // 随机速度
  76.     };
  77.     this.particles = [];
  78.     this.exploded = false;
  79.   }
  81.   draw() {
  82.     if (!this.exploded) {
  83.       ctx.save();
  84.       ctx.beginPath();
  85.       ctx.fillStyle = this.color;
  86.       ctx.arc(this.x, this.y, 4, 0, Math.PI * 2, false);
  87.       ctx.fill();
  88.       ctx.restore();
  89.     }
  91.     this.particles.forEach(particle => particle.draw());
  92.   }
  94.   update() {
  95.     if (!this.exploded) {
  96.       this.velocity.y += 0.1; // 加速度模拟重力
  97.       this.x += this.velocity.x;
  98.       this.y += this.velocity.y;
  100.       // 确保烟花不会超出屏幕
  101.       if (this.x < 0 || this.x > canvas.width) {
  102.         this.velocity.x *= -1;
  103.       }
  105.       if (this.velocity.y >= 0) {
  106.         this.explode();
  107.       }
  108.     }
  110.     this.particles.forEach((particle, index) => {
  111.       if (particle.alpha <= 0) {
  112.         this.particles.splice(index, 1);
  113.       } else {
  114.         particle.update();
  115.       }
  116.     });
  117.   }
  119.   explode() {
  120.     for (let i = 0; i < Math.random() * 10 + 40; i++) {
  121.       this.particles.push(new Particle(this.x, this.y, this.color));
  122.     }
  123.     this.exploded = true;
  124.   }
  125. }
  127. let fireworks = [];
  129. function createFirework() {
  130.   fireworks.push(new Firework());
  131. }
  133. function animate() {
  134.   requestAnimationFrame(animate);
  135.   ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  136.   ctx.fillRect(0, 0, canvas.width, canvas.height);
  138.   fireworks.forEach((firework, index) => {
  139.     if (firework.particles.length === 0 && firework.exploded) {
  140.       fireworks.splice(index, 1);
  141.     } else {
  142.       firework.update();
  143.       firework.draw();
  144.     }
  145.   });
  146. }
  148. function launchRandomFireworks() {
  149.   setTimeout(() => {
  150.     createFirework();
  151.     launchRandomFireworks();
  152.   }, Math.random() * 50);
  153. }
  155. launchRandomFireworks();
  156. animate();
  157. </script>
  158. </body>
复制代码
案例4：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>烟花效果原型2</title>
  6. <style>
  7.   body, html {
  8.     margin: 0;
  9.     padding: 0;
  10.     overflow: hidden;
  11.   }
  12.   canvas {
  13.     background: black;
  14.   }
  15. </style>
  16. </head>
  17. <body>
  18. <canvas id="fireworks"></canvas>
  19. <script>
  20. // 获取canvas元素并设置其宽高
  21. const canvas = document.getElementById('fireworks');
  22. const ctx = canvas.getContext('2d');
  23. canvas.width = window.innerWidth;
  24. canvas.height = window.innerHeight;
  26. // 烟花发射时的粒子类
  27. class FireworkParticle {
  28.   constructor(x, y, color) {
  29.     this.x = x;
  30.     this.y = y;
  31.     this.color = color;
  32.     this.velocity = {
  33.       x: (Math.random() - 0.5) * 3,
  34.       y: -(Math.random() * 8 + 5) // 向上的速度
  35.     };
  36.     this.alpha = 1;
  37.   }
  39.   draw() {
  40.     ctx.save();
  41.     ctx.globalAlpha = this.alpha;
  42.     ctx.beginPath();
  43.     ctx.fillStyle = this.color;
  44.     ctx.arc(this.x, this.y, 2, 0, Math.PI * 2, false);
  45.     ctx.fill();
  46.     ctx.restore();
  47.   }
  49.   update() {
  50.     this.velocity.y += 0.05; // 较小的重力影响
  51.     this.x += this.velocity.x;
  52.     this.y += this.velocity.y;
  53.     this.alpha -= 0.01; // 较快的渐隐效果
  55.     if (this.alpha <= 0) {
  56.       this.alpha = 0;
  57.     }
  58.   }
  59. }
  61. // 烟花爆炸时的粒子类
  62. class ExplosionParticle {
  63.   constructor(x, y, color) {
  64.     this.x = x;
  65.     this.y = y;
  66.     this.color = color;
  67.     this.velocity = {
  68.       x: (Math.random() - 0.5) * 6,
  69.       y: (Math.random() - 0.5) * 6
  70.     };
  71.     this.alpha = 1;
  72.   }
  74.   draw() {
  75.     ctx.save();
  76.     ctx.globalAlpha = this.alpha;
  77.     ctx.beginPath();
  78.     ctx.fillStyle = this.color;
  79.     ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
  80.     ctx.fill();
  81.     ctx.restore();
  82.   }
  84.   update() {
  85.     // this.velocity.y += 0.05; // 较小的重力影响
  86.     this.x += this.velocity.x;
  87.     this.y += this.velocity.y;
  88.     this.alpha -= 0.015; // 渐隐效果
  90.     if (this.alpha <= 0) {
  91.       this.alpha = 0;
  92.     }
  93.   }
  94. }
  96. // 烟花类
  97. class Firework {
  98.   constructor() {
  99.     this.x = Math.random() * canvas.width;
  100.     this.y = canvas.height;
  101.     this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
  102.     const maxInitialVelocity = -Math.sqrt(2 * 0.1 * canvas.height);
  103.     const maxHeight = 1;
  104.     const minHeight = 0.4;
  106.     this.velocity = {
  107.       x: (Math.random() - 0.5) * 6,
  108.       y: maxInitialVelocity * (Math.random() * (maxHeight - minHeight) + minHeight) // 随机速度
  109.     };
  110.     this.particles = [];
  111.     this.explosionParticles = [];
  112.     this.exploded = false;
  113.   }
  115.   draw() {
  116.     if (!this.exploded) {
  117.       ctx.save();
  118.       ctx.beginPath();
  119.       ctx.fillStyle = this.color;
  120.       ctx.arc(this.x, this.y, 4, 0, Math.PI * 2, false);
  121.       ctx.fill();
  122.       ctx.restore();
  123.     }
  125.     this.particles.forEach(particle => particle.draw());
  126.     this.explosionParticles.forEach(particle => particle.draw());
  127.   }
  129.   update() {
  130.     this.particles.forEach(particle => {
  131.       particle.update();
  132.       if (particle.alpha <= 0) {
  133.         const index = this.particles.indexOf(particle);
  134.         if (index > -1) {
  135.           this.particles.splice(index, 1);
  136.         }
  137.       }
  138.     });
  140.     this.explosionParticles.forEach(particle => {
  141.       particle.update();
  142.       if (particle.alpha <= 0) {
  143.         const index = this.explosionParticles.indexOf(particle);
  144.         if (index > -1) {
  145.           this.explosionParticles.splice(index, 1);
  146.         }
  147.       }
  148.     });
  150.     if (!this.exploded) {
  151.       this.velocity.y += 0.1; // 加速度模拟重力
  152.       this.x += this.velocity.x;
  153.       this.y += this.velocity.y;
  155.       if (this.x < 0 || this.x > canvas.width) {
  156.         this.velocity.x *= -1;
  157.       }
  159.       if (this.velocity.y >= 0) {
  160.         this.explode();
  161.       }
  162.     }
  163.   }
  165.   explode() {
  166.     for (let i = 0; i < Math.random() * 10 + 40; i++) {
  167.       this.explosionParticles.push(new ExplosionParticle(this.x, this.y, this.color));
  168.     }
  169.     this.exploded = true;
  170.   }
  171. }
  173. let fireworks = [];
  175. function createFirework() {
  176.   fireworks.push(new Firework());
  177. }
  179. function animate() {
  180.   requestAnimationFrame(animate);
  181.   ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  182.   ctx.fillRect(0, 0, canvas.width, canvas.height);
  184.   fireworks.forEach((firework, index) => {
  185.     if (firework.particles.length === 0 && firework.explosionParticles.length === 0 && firework.exploded) {
  186.       fireworks.splice(index, 1);
  187.     } else {
  188.       firework.update();
  189.       firework.draw();
  190.     }
  191.   });
  192. }
  194. function launchRandomFireworks() {
  195.   setTimeout(() => {
  196.     createFirework();
  197.     launchRandomFireworks();
  198.   }, Math.random() * 50);
  199. }
  201. launchRandomFireworks();
  202. animate();
  203. </script>
  204. </body>
  205. </html>
复制代码
案例5：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>烟花效果原型</title>
  6. <style>
  7.   body, html {
  8.     margin: 0;
  9.     padding: 0;
  10.     overflow: hidden;
  11.   }
  12.   canvas {
  13.     background: black;
  14.   }
  15. </style>
  16. </head>
  17. <body>
  18. <canvas id="fireworks"></canvas>
  19. <script>
  20. // 获取canvas元素并设置其宽高
  21. const canvas = document.getElementById('fireworks');
  22. const ctx = canvas.getContext('2d');
  23. canvas.width = window.innerWidth;
  24. canvas.height = window.innerHeight;
  26. // 烟花发射时的粒子类
  27. class FireworkParticle {
  28.   constructor(x, y, color) {
  29.     this.x = x;
  30.     this.y = y;
  31.     this.color = color;
  32.     this.velocity = {
  33.       x: (Math.random() - 0.5) * 3,
  34.       y: -(Math.random() * 8 + 5) // 向上的速度
  35.     };
  36.     this.alpha = 1;
  37.   }
  39.   draw() {
  40.     ctx.save();
  41.     ctx.globalAlpha = this.alpha;
  42.     ctx.beginPath();
  43.     ctx.fillStyle = this.color;
  44.     ctx.arc(this.x, this.y, 2, 0, Math.PI * 2, false);
  45.     ctx.fill();
  46.     ctx.restore();
  47.   }
  49.   update() {
  50.     this.velocity.y += 0.05; // 较小的重力影响
  51.     this.x += this.velocity.x;
  52.     this.y += this.velocity.y;
  53.     this.alpha -= 0.01; // 较快的渐隐效果
  55.     if (this.alpha <= 0) {
  56.       this.alpha = 0;
  57.     }
  58.   }
  59. }
  61. // 烟花爆炸时的粒子类
  62. class ExplosionParticle {
  63.     constructor(x, y, color, size) {
  64.     this.x = x;
  65.     this.y = y;
  66.     this.color = color;
  67.     this.velocity = {
  68.       x: (Math.random() - 0.5) * 6,
  69.       y: (Math.random() - 0.5) * 6
  70.     };
  71.     this.alpha = 1;
  72.     this.size = size; // 粒子大小
  73.   }
  75.   draw() {
  76.     ctx.save();
  77.     ctx.globalAlpha = this.alpha;
  78.     ctx.beginPath();
  79.     ctx.fillStyle = this.color;
  80.     ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
  81.     ctx.fill();
  82.     ctx.restore();
  83.   }
  85.   update() {
  86.     this.x += this.velocity.x;
  87.     this.y += this.velocity.y;
  88.     this.alpha -= 0.015; // 渐隐效果
  90.     if (this.alpha <= 0) {
  91.       this.alpha = 0;
  92.     }
  93.   }
  94. }
  96. // 烟花类
  97. class Firework {
  98.   constructor() {
  99.     this.x = Math.random() * canvas.width;
  100.     this.y = canvas.height;
  101.     this.color = this.getRandomColor(); // 使用随机颜色
  102.     const maxInitialVelocity = -Math.sqrt(2 * 0.1 * canvas.height);
  103.     const maxHeight = 1;
  104.     const minHeight = 0.4;
  106.     this.velocity = {
  107.       x: (Math.random() - 0.5) * 6,
  108.       y: maxInitialVelocity * (Math.random() * (maxHeight - minHeight) + minHeight) // 随机速度
  109.     };
  110.     this.particles = [];
  111.     this.explosionParticles = [];
  112.     this.exploded = false;
  113.   }
  115.   getRandomColor() {
  116.     const r = Math.floor(Math.random() * 256);
  117.     const g = Math.floor(Math.random() * 256);
  118.     const b = Math.floor(Math.random() * 256);
  119.     return `rgb(${r}, ${g}, ${b})`;
  120.   }
  122.   draw() {
  123.     if (!this.exploded) {
  124.       ctx.save();
  125.       ctx.beginPath();
  126.       ctx.fillStyle = this.color;
  127.       ctx.arc(this.x, this.y, 4, 0, Math.PI * 2, false);
  128.       ctx.fill();
  129.       ctx.restore();
  130.     }
  132.     this.particles.forEach(particle => particle.draw());
  133.     this.explosionParticles.forEach(particle => particle.draw());
  134.   }
  136.   update() {
  137.     this.particles.forEach(particle => {
  138.       particle.update();
  139.       if (particle.alpha <= 0) {
  140.         const index = this.particles.indexOf(particle);
  141.         if (index > -1) {
  142.           this.particles.splice(index, 1);
  143.         }
  144.       }
  145.     });
  147.     this.explosionParticles.forEach(particle => {
  148.       particle.update();
  149.       if (particle.alpha <= 0) {
  150.         const index = this.explosionParticles.indexOf(particle);
  151.         if (index > -1) {
  152.           this.explosionParticles.splice(index, 1);
  153.         }
  154.       }
  155.     });
  157.     if (!this.exploded) {
  158.       this.velocity.y += 0.1; // 加速度模拟重力
  159.       this.x += this.velocity.x;
  160.       this.y += this.velocity.y;
  162.       if (this.x < 0 || this.x > canvas.width) {
  163.         this.velocity.x *= -1;
  164.       }
  166.       if (this.velocity.y >= 0) {
  167.         this.explode();
  168.       }
  169.     }
  170.   }
  172.   explode() {
  173.     const particleCount = Math.random() * 20 + 30; // 增加粒子数量
  174.     for (let i = 0; i < particleCount; i++) {
  175.       const size = Math.random() * 3 + 1; // 粒子大小变化
  176.       const newColor = this.getRandomColor(); // 每个粒子可能有不同的颜色
  177.       this.explosionParticles.push(new ExplosionParticle(this.x, this.y, newColor, size));
  178.     }
  179.     this.exploded = true;
  180.   }
  181. }
  183. let fireworks = [];
  185. function createFirework() {
  186.   fireworks.push(new Firework());
  187. }
  189. function animate() {
  190.   requestAnimationFrame(animate);
  191.   ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  192.   ctx.fillRect(0, 0, canvas.width, canvas.height);
  194.   fireworks.forEach((firework, index) => {
  195.     if (firework.particles.length === 0 && firework.explosionParticles.length === 0 && firework.exploded) {
  196.       fireworks.splice(index, 1);
  197.     } else {
  198.       firework.update();
  199.       firework.draw();
  200.     }
  201.   });
  202. }
  204. function launchRandomFireworks() {
  205.   setTimeout(() => {
  206.     createFirework();
  207.     launchRandomFireworks();
  208.   }, Math.random() * 50);
  209. }
  211. launchRandomFireworks();
  212. animate();
  213. </script>
  214. </body>
  215. </html>
复制代码
以上代码是我给我朋友帮忙时写的，但是后来没用上，现分享出来给大家
未完待续。。。文章不定时更新

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

北冰洋以北

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表