新春即到，来做一个看烟花还可以自定义文案的网页吧！HTML烟花源码

最新推荐文章于 2025-09-16 10:55:42 发布

原创

最新推荐文章于 2025-09-16 10:55:42 发布 · 442 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

如果你还没有注册雨云（rainyun），可以通过该链接进行注册雨云 - 新一代云服务提供商
通过该链接注册是可以白嫖到优惠券的，可以白嫖虚拟主机。
比直接注册划算。

选购服务器

这次的代码搭建起来的比较简单，不需要一些特定的环境，所以使用宝塔或者是ep面板都可以，这里为了方便演示就使用宝塔做演示。

点击网站

添加站点

填上你的域名然后点击提交

提交完成后我们点击刚才添加的网站的根目录

点击上传

你可以手动创建一个index.html文件，然后将下面代码粘贴进去

然后我们访问我们的域名

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>HTML5+Canvas漂亮的3D烟花2024跨年特效</title>

  <style>
    html,
    body {
      margin: 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
    }
  </style>

</head>

<body>
  <canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
  <canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas"></canvas>
  <audio id="myAudio" src="./music/test.mp3" controls autoplay style="display: none;">
  </audio>

  <!-- <div class="overlay">
    <div class="tabs">
      <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span
          class="tabs-label">Share</span></div>

      <div class="tabs-panels">
        <ul class="tabs-panel commands">
        </ul>
      </div>
    </div>
  </div> -->
  <script src="./js/jQuery.js" type="text/javascript"></script>

  <script>
    function initVars() {

      pi = Math.PI;
      ctx = canvas.getContext("2d");
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;
      cx = canvas.width / 2;
      cy = canvas.height / 2;
      playerZ = -25;
      playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;
      scale = 600;
      seedTimer = 0;
      seedInterval = 5, seedLife = 100;
      gravity = .02;
      seeds = new Array();
      s = "./music/";
      sparks = new Array();
      pow1 = new Audio(s + "fire1.ogg");
      pow2 = new Audio(s + "fire2.ogg");
      pow3 = new Audio(s + "fire3.ogg");
      pow4 = new Audio(s + "fire4.ogg");
      frames = 0;
    }

    function rasterizePoint(x, y, z) {

      var p, d;
      x -= playerX;
      y -= playerY;
      z -= playerZ;
      p = Math.atan2(x, z);
      d = Math.sqrt(x * x + z * z);
      x = Math.sin(p - yaw) * d;
      z = Math.cos(p - yaw) * d;
      p = Math.atan2(y, z);
      d = Math.sqrt(y * y + z * z);
      y = Math.sin(p - pitch) * d;
      z = Math.cos(p - pitch) * d;
      var rx1 = -1000,
        ry1 = 1,
        rx2 = 1000,
        ry2 = 1,
        rx3 = 0,
        ry3 = 0,
        rx4 = x,
        ry4 = z,
        uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
      if (!uc) return {
        x: 0,
        y: 0,
        d: -1
      };
      var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
      var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
      if (!z) z = .000000001;
      if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
        return {
          x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
          y: cy + y / z * scale,
          d: Math.sqrt(x * x + y * y + z * z)
        };
      } else {
        return {
          x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
          y: cy + y / z * scale,
          d: -1
        };
      }
    }

    function spawnSeed() {

      seed = new Object();
      seed.x = -50 + Math.random() * 100;
      seed.y = 25;
      seed.z = -50 + Math.random() * 100;
      seed.vx = .1 - Math.random() * .2;
      seed.vy = -1.5; //*(1+Math.random()/2);
      seed.vz = .1 - Math.random() * .2;
      seed.born = frames;
      seeds.push(seed);
    }

    function splode(x, y, z) {

      t = 5 + parseInt(Math.random() * 150);
      sparkV = 1 + Math.random() * 2.5;
      type = parseInt(Math.random() * 3);
      switch (parseInt(Math.random() * 4)) {
        case 0:
          pow = new Audio(s + "fire1.ogg");
          break;
        case 1:
          pow = new Audio(s + "fire2.ogg");
          break;
        case 2:
          pow = new Audio(s + "fire3.ogg");
          break;
        case 3:
          pow = new Audio(s + "fire4.ogg");
          break;
      }
      // d=Math.

最低0.47元/天解锁文章