每一片雪花,每一个烟花,每一秒的时光流转,每一个思念的传递,都代表着你想要传递的每一个心愿:在这里提前祝大家新年快乐！

今天在这里给大家分享一个超级好看的烟花代码，纯html+js制作，效果如下：

 预览地址：2022虎虎生威

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .city {
      width: 100%;
      position: fixed;
      bottom: 0px;
      z-index: 100;
    }

    .city img {
      width: 100%;
    }
  </style>
  <title>2022虎虎生威</title>
</head>
<body onselectstart="return false">
<canvas id='cas' style="background-color:rgba(0,5,24,1)">浏览器不支持canvas</canvas>
<div class="city"><img src="city.png" alt=""/></div>
<img src="moon.png" alt="" id="moon" style="visibility: hidden;"/>
<div style="display:none">
  <div class="shape">2022新年快乐</div>
  <div class="shape">新春福虎送吉祥</div>
  <div class="shape">金虎进家富满堂</div>
  <div class="shape">ヾ(^∀^)ﾉ</div>
</div>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="boom.mp3" preload="auto"></audio>
<audio src="shotfire.mp3" preload="auto"></audio>
<audio src="shotfire.mp3" preload="auto"></audio>
<audio src="shotfire.mp3" preload="auto"></audio>
</body>
</html>

部分js

<script>
  var canvas = document.getElementById("cas");
  var ocas = document.createElement("canvas");
  var octx = ocas.getContext("2d");
  var ctx = canvas.getContext("2d");
  ocas.width = canvas.width = window.innerWidth;
  ocas.height = canvas.height = window.innerHeight;
  var bigbooms = [];

  window.onload = function() {
    initAnimate()
  }

  function initAnimate() {
    drawBg();

    lastTime = new Date();
    animate();
  }

  var lastTime;
  function animate() {
    ctx.save();
    ctx.globalCompositeOperation = 'destination-out';
    ctx.globalAlpha = 0.1;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();

    var newTime = new Date();
    if (newTime - lastTime > 200 + (window.innerHeight - 767) / 2) {
      var random = Math.random() * 100 > 2 ? true : false;
      var x = getRandom(canvas.width / 5, canvas.width * 4 / 5);
      var y = getRandom(50, 200);
      if (random) {
        var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {x: x, y: y});
        bigbooms.push(bigboom)
      }
      else {
        var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {
          x: canvas.width / 2,
          y: 200
        }, document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);
        bigbooms.push(bigboom)
      }
      lastTime = newTime;
    }

    stars.foreach(function() {
      this.paint();
    })

    drawMoon();

    bigbooms.foreach(function(index) {
      var that = this;
      if (!this.dead) {
        this._move();
        this._drawLight();
      }
      else {
        this.booms.foreach(function(index) {
          if (!this.dead) {
            this.moveTo(index);
          }
          else if (index === that.booms.length - 1) {
            bigbooms.splice(bigbooms.indexOf(that), 1);
          }
        })
      }
    });

    raf(animate);
  }

  function drawMoon() {
    var moon = document.getElementById("moon");
    var centerX = canvas.width - 200, centerY = 100, width = 80;
    if (moonplete) {
      ctx.drawImage(moon, centerX, centerY, width, width)
    }
    else {
      moon.onload = function() {
        ctx.drawImage(moon, centerX, centerY, width, width)
      }
    }
    var index = 0;
    for (var i = 0; i < 10; i++) {
      ctx.save();
      ctx.beginPath();
      ctx.arc(centerX + width / 2, centerY + width / 2, width / 2 + index, 0, 2 * Math.PI);
      ctx.fillStyle = "rgba(240,219,120,0.005)";
      index += 2;
      ctx.fill();
      ctx.restore();
    }

  }
</script>

需要完整代码微信搜搜 木易学长 微信公众号，回复：烟花代码，即可获取完整源码哟~

 

更多推荐

2022超nice的跨年烟花代码