HTML粉色烟花秀

系列文章

|----|--------------------------------------------------------------------------------------------------------------|
| 序号 | 目录 |
| 1 | HTML满屏跳动的爱心（可写字） |
| 2 | HTML五彩缤纷的爱心 |
| 3 | HTML满屏漂浮爱心 |
| 4 | HTML情人节快乐 |
| 5 | HTML蓝色爱心射线 |
| 6 | HTML跳动的爱心（简易版） |
| 7 | HTML粒子爱心 |
| 8 | HTML蓝色动态爱心 |
| 9 | HTML跳动的爱心（双心版） |
| 10 | HTML橙色动态粒子爱心 |
| 11 | HTML旋转爱心 |
| 12 | HTML爱情树 |
| 13 | HTML3D相册 |
| 14 | HTML旋转相册 |
| 15 | HTML基础烟花秀 |
| 16 | HTML炫酷烟花秀 |
| 17 | HTML粉色烟花秀 |
| 18 | HTML新春烟花 |
| 19 | HTML龙年大吉 |
| 20 | HTML圣诞树 |
| 21 | HTML大雪纷飞 |
| 22 | HTML想见你 |
| 23 | HTML元素周期表 |
| 24 | HTML飞舞的花瓣 |
| 25 | HTML星空特效 |
| 26 | HTML黑客帝国字母雨 |
| 27 | HTML哆啦A梦 |
| 28 | HTML流星雨 |
| 29 | HTML沙漏爱心 |
| 30 | HTML爱心字母雨 |
| 31 | HTML爱心流星雨 |
| 32 | HTML生日蛋糕 |

写在前面

马上就要到2025年喽，博主用 html 给大家准备了粉色系的跨年烟花秀，一起来看看吧~

HTML（Hypertext Markup Language）是一种标记语言，用于创建网页的结构和内容。它使用一系列标签（tag）来标记文本，以指示浏览器如何展示内容。HTML是万维网的基础技术之一，它定义了网页的结构和链接方式。

HTML的发展可以追溯到1989年，由蒂姆·伯纳斯-李（Tim Berners-Lee）创始于欧洲核子研究组织（CERN）。最初，HTML只是用于将文档链接在一起，没有表现力很强。随着互联网的发展，HTML的功能逐渐增强，可以实现各种复杂的效果。

HTML由标签构成。标签通常用尖括号表示，例如<tag>。标签可以有属性（attribute），用于指定标签的属性值。属性通常包括名称和值，以键值对的形式表示。例如，<tag attribute="value">。

HTML文档通常由头部（head）和主体（body）组成。头部包含了文档的元信息，例如标题、样式表和脚本。主体包含了文档的实际内容，例如段落、标题、图像和链接。

HTML常用的标签和功能：

标题标签（<h1>到<h6>）用于定义标题的级别和重要性。
段落标签（<p>）用于定义段落。
链接标签（<a>）用于创建链接到其他网页或文件的超链接。
图像标签（<img>）用于在网页中插入图像。
列表标签（<ul>和<ol>）用于创建无序列表和有序列表。
表格标签（<table>、<tr>和<td>）用于创建表格。
表单标签（<form>、<input>和<button>）用于创建交互式表单。
样式标签（<style>）用于定义文档的样式。
脚本标签（<script>）用于在网页中嵌入JavaScript脚本。

除了这些基本功能外，HTML还支持更多的标签和功能，例如音频和视频播放、动画效果、地理定位等。此外，HTML还可以与CSS（层叠样式表）和JavaScript等技术一起使用，以实现更复杂和交互式的网页效果。

总结起来，HTML是一种用于创建网页结构和内容的标记语言。它使用标签来标记文本，并告诉浏览器如何展示内容。HTML的功能丰富多样，可以实现各种各样的网页效果。掌握HTML是学习Web开发的第一步。

完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?c923daf3182a4b0ce01878475080aadc";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>

<head>
  <meta charset="UTF-8">
  <title>新年快乐！</title>
</head>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background: black;
  }

  canvas {
    position: absolute;
  }
</style>

<body>

  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>

  <script>

    function GetRequest() {
      var url = decodeURI(location.search);
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    }
    class Shard {
      constructor(x, y, hue) {
        this.x = x;
        this.y = y;
        this.hue = hue;
        this.lightness = 50;
        this.size = 15 + Math.random() * 10;
        const angle = Math.random() * 2 * Math.PI;
        const blastSpeed = 1 + Math.random() * 6;
        this.xSpeed = Math.cos(angle) * blastSpeed;
        this.ySpeed = Math.sin(angle) * blastSpeed;
        this.target = getTarget();
        this.ttl = 100;
        this.timer = 0;
      }
      draw() {
        ctx2.fillStyle = `hsl(${this.hue}, 100%, ${this.lightness}%)`;
        ctx2.beginPath();
        ctx2.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx2.closePath();
        ctx2.fill();
      }
      update() {
        if (this.target) {
          const dx = this.target.x - this.x;
          const dy = this.target.y - this.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          const a = Math.atan2(dy, dx);
          const tx = Math.cos(a) * 5;
          const ty = Math.sin(a) * 5;
          this.size = lerp(this.size, 1.5, 0.05);

          if (dist < 5) {
            this.lightness = lerp(this.lightness, 100, 0.01);
            this.xSpeed = this.ySpeed = 0;
            this.x = lerp(this.x, this.target.x + fidelity / 2, 0.05);
            this.y = lerp(this.y, this.target.y + fidelity / 2, 0.05);
            this.timer += 1;
          } else
            if (dist < 10) {
              this.lightness = lerp(this.lightness, 100, 0.01);
              this.xSpeed = lerp(this.xSpeed, tx, 0.1);
              this.ySpeed = lerp(this.ySpeed, ty, 0.1);
              this.timer += 1;
            } else {
              this.xSpeed = lerp(this.xSpeed, tx, 0.02);
              this.ySpeed = lerp(this.ySpeed, ty, 0.02);
            }
        } else {
          this.ySpeed += 0.05;

          this.size = lerp(this.size, 1, 0.05);

          if (this.y > c2.height) {
            shards.forEach((shard, idx) => {
              if (shard === this) {
                shards.splice(idx, 1);
              }
            });
          }
        }
        this.x = this.x + this.xSpeed;
        this.y = this.y + this.ySpeed;
      }
    }

    class Rocket {
      constructor() {
        const quarterW = c2.width / 4;
        this.x = quarterW + Math.random() * (c2.width - quarterW);
        this.y = c2.height - 15;
        this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;
        this.blastSpeed = 6 + Math.random() * 7;
        this.shardCount = 15 + Math.floor(Math.random() * 15);
        this.xSpeed = Math.sin(this.angle) * this.blastSpeed;
        this.ySpeed = -Math.cos(this.angle) * this.blastSpeed;
        this.hue = Math.floor(Math.random() * 360);
        this.trail = [];
      }
      draw() {
        ctx2.save();
        ctx2.translate(this.x, this.y);
        ctx2.rotate(Math.atan2(this.ySpeed, this.xSpeed) + Math.PI / 2);
        ctx2.fillStyle = `hsl(${this.hue}, 100%, 50%)`;
        ctx2.fillRect(0, 0, 5, 15);
        ctx2.restore();
      }
      update() {
        this.x = this.x + this.xSpeed;
        this.y = this.y + this.ySpeed;
        this.ySpeed += 0.1;
      }

      explode() {
        for (let i = 0; i < 70; i++) {
          shards.push(new Shard(this.x, this.y, this.hue));
        }
      }
    }

    console.log(GetRequest('val').val)

    const [c1, c2, c3] = document.querySelectorAll('canvas');
    const [ctx1, ctx2, ctx3] = [c1, c2, c3].map(c => c.getContext('2d'));
    let fontSize = 200;
    const rockets = [];
    const shards = [];
    const targets = [];
    const fidelity = 3;
    let counter = 0;
    c2.width = c3.width = window.innerWidth;
    c2.height = c3.height = window.innerHeight;
    ctx1.fillStyle = 'skyblue';
    const text = '新年快乐'
    let textWidth = 9999;

    while (textWidth > window.innerWidth) {
      ctx1.font = `900 ${fontSize--}px Arial`;
      textWidth = ctx1.measureText(text).width;
    }

    c1.width = textWidth;
    c1.height = fontSize * 1.5;
    ctx1.font = `900 ${fontSize}px Arial`;
    ctx1.fillText(text, 0, fontSize - 30);
    const imgData = ctx1.getImageData(0, 0, c1.width, c1.height);
    for (let i = 0, max = imgData.data.length; i < max; i += 4) {
      const alpha = imgData.data[i + 3];
      const x = Math.floor(i / 4) % imgData.width;
      const y = Math.floor(i / 4 / imgData.width);

      if (alpha && x % fidelity === 0 && y % fidelity === 0) {
        targets.push({ x, y });
      }
    }

    ctx3.fillStyle = 'pink';
    ctx3.shadowColor = 'pink';
    ctx3.shadowBlur = 25;


    (function loop() {
      ctx2.fillStyle = "deeppink";
      ctx2.fillRect(0, 0, c2.width, c2.height);
      counter += 1;

      if (counter % 15 === 0) {
        rockets.push(new Rocket());
      }
      rockets.forEach((r, i) => {
        r.draw();
        r.update();
        if (r.ySpeed > 0) {
          r.explode();
          rockets.splice(i, 1);
        }
      });

      shards.forEach((s, i) => {
        s.draw();
        s.update();

        if (s.timer >= s.ttl || s.lightness >= 99) {
          ctx3.fillRect(s.target.x, s.target.y, fidelity + 1, fidelity + 1);
          shards.splice(i, 1);
        }
      });

      requestAnimationFrame(loop);
    })();

    const lerp = (a, b, t) => Math.abs(b - a) > 0.1 ? a + t * (b - a) : b;

    function getTarget() {
      if (targets.length > 0) {
        const idx = Math.floor(Math.random() * targets.length);
        let { x, y } = targets[idx];
        targets.splice(idx, 1);

        x += c2.width / 2 - textWidth / 2;
        y += c2.height / 2 - fontSize / 2;

        return { x, y };
      }
    }
  </script>

</body>

</html>

修改文字

在代码的第185、186可以修改中间的文字颜色哦~

在代码的第191行可以修改背景颜色哦~

代码分析

这段代码通过HTML和JavaScript结合，创建了一个"新年快乐"主题的烟花动画，并在屏幕上显示文字"新年快乐"。其实现方式主要涉及画布（canvas）操作、火箭发射、烟花爆炸以及文字的动态生成与展示。以下是这段代码的详细分析。

一、代码结构概览

代码主要分为三部分：

HTML结构 ：通过<canvas>标签创建三个画布，用于不同的绘图操作。
CSS样式：设置画布和页面的样式，使背景为黑色，并使画布覆盖整个页面。
JavaScript逻辑：核心部分，负责烟花的发射、爆炸效果以及文字的生成。

二、画布的初始化与配置

在代码中，使用了三个canvas元素，它们通过JavaScript分别绑定到三个上下文对象：ctx1、ctx2和ctx3，用于不同的绘制操作。

ctx1：负责绘制"新年快乐"文字。
ctx2：负责绘制火箭的飞行和烟花的爆炸效果。
ctx3：用于绘制烟花爆炸后的残留效果。

这三个画布通过设置宽度和高度，确保其覆盖整个窗口。c1的宽高根据文字的宽度和字体大小动态调整，以确保文字能够适应屏幕。

三、文字的生成

代码通过ctx1.fillText方法在画布上绘制"新年快乐"文字。首先，代码根据屏幕的宽度动态调整字体大小，确保文字不会超出屏幕宽度。然后，getImageData方法获取画布上的像素数据，以提取出文字的形状。

通过逐个检查像素的透明度值（alpha），代码识别出文字中每个可见部分的坐标。接着，这些坐标存储在targets数组中，作为烟花爆炸的目标点。烟花爆炸后，碎片会逐渐飞向这些目标点，最终在屏幕上组成文字"新年快乐"。

四、烟花动画

烟花动画的核心是Rocket（火箭）和Shard（烟花碎片）两个类。

Rocket类 ：代表烟花的发射过程。每个火箭有随机的初始位置和发射角度，沿着一条随机的轨迹上升。update方法用于更新火箭的位置，模拟火箭上升的运动；当火箭达到一定高度后，通过explode方法使其爆炸，生成多个Shard对象。
Shard类：代表烟花爆炸后的碎片。每个碎片有随机的速度和方向，在空中飞行并逐渐减速。碎片的目标是之前生成的文字的像素点，它们会逐渐朝着这些目标移动，直到到达目标点后停止。

在代码中，使用了requestAnimationFrame实现动画的平滑更新。loop函数是动画的主循环，在每一帧中都会更新火箭和碎片的位置，并重绘整个画布。

五、颜色和效果

在这段代码中，颜色的变化通过HSL色彩模型实现。每个火箭和烟花碎片都有一个随机的hue值，决定了它们的颜色。Shard类的draw方法使用ctx2.arc画圆的方法绘制每个碎片，并通过调整lightness值模拟烟花的逐渐消失效果。

此外，代码还通过shadowColor和shadowBlur为爆炸后的烟花添加了阴影效果，使得爆炸显得更加闪亮逼真。

六、目标点与插值

碎片飞向文字目标点的过程使用了线性插值（lerp）算法，lerp函数用于在当前碎片位置与目标位置之间进行平滑过渡。通过不断缩小位置差距，碎片能够逐渐接近并最终停留在目标点。

七、火箭与碎片的生命周期

每个火箭和碎片都有各自的生命周期。当火箭上升到一定高度时，会自动触发爆炸，生成碎片。而每个碎片则在到达目标点或超过一定的存活时间后从数组中移除。这样可以避免画布上元素的无限增长，保证动画的性能和流畅度。

八、总结

这段代码通过使用HTML5的canvas元素，结合JavaScript中的对象和动画操作，实现了一个复杂而又美观的烟花动画。代码的核心思想是将烟花的爆炸与文字的显示相结合，通过计算每个像素点的位置，使烟花碎片能够精确地拼成文字。同时，代码还采用了多种动画技巧，如随机生成、插值算法和帧动画，确保动画的自然流畅。

写在最后

我是一只有趣的兔子，感谢你的喜欢！