跨年夜，想请你看一场烟花秀！

Love The Way You Lie 2023-09-27 13:36 23阅读 0赞

代码分享地址：

> 链接：https://pan.baidu.com/s/1Cu\_lKYfAlMBDttSzhVXPuQ 提取码：2ocd

代码效果展示：

![在这里插入图片描述][ded7fd5ac30542a4b6666a391fa6a9e4.png]

源代码分享如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/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;
            z-index: 10;
          }
    
          .city img {
          
            width: 100%;
          }
    
          #labels,
          #extra {
          
            /* color: rgb(106, 17, 11); */
    
            color: #daf6ff;
            text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
            font-weight: bold;
            font-size: 2.8rem;
            position: absolute;
            width: 100%;
            text-align: center;
            opacity: 0;
            transition: all 0.5s ease-in-out;
            z-index: 100;
            top: 30%;
          }
          #labels.hide {
          
            opacity: 0;
            transform: scale(1);
          }
          #labels.show,
          #extra.show {
          
            opacity: 1;
            z-index: 100;
            transform: scale(1.3);
          }
        </style>
        <title>Happy New Year</title>
      </head>
      <body onselectstart="return false">
        <canvas id="cas" style="background-color: rgba(0, 5, 24, 1)"
          >浏览器不支持canvas</canvas
        >
        <div id="labels"></div>
        <div class="city"><img src="./city_2.png" alt="" /></div>
        <img src="./moon.png" alt="" id="moon" style="visibility: hidden" />
        <div id="labels"></div>
    
        <script>
          let __audio = document.createElement("audio");
          //修改音乐在这里
          __audio.src = "http://music.163.com/song/media/outer/url?id=28828078.mp3";
          __audio.loop = true;
          __audio.volume = 0.6;
          window.onclick = function () {
          
            __audio.play();
          };
        </script>
        <script>
          let starCount = 1500;
          let starArr = new Array();
    
          //想要说的话在这里
          const my_labels = [
            "新的一年健健康康、平安喜乐!",
            "日月有情迎元旦，山川无阻庆新年",
          ];
          const shapes = [
            // "img$http://www.html5tricks.com/wp-content/uploads/2015/03/html5-canvas-drag-tree.png"
          ];
          let canvas = document.getElementById("cas");
          let ocas = document.createElement("canvas");
          let octx = ocas.getContext("2d");
          let ctx = canvas.getContext("2d");
          ocas.width = canvas.width = window.innerWidth;
          ocas.height = canvas.height = window.innerHeight;
          let bigbooms = [];
    
          window.onload = function () {
          
            initAnimate();
    
            const labels = document.getElementById("labels");
            for (let i = 0; i < my_labels.length; i++) {
          
              setTimeout(() => {
          
                // labels.className = "hide";
                labels.innerHTML = my_labels[i];
                labels.className = "show";
                if (i < my_labels.length - 1) {
          
                  setTimeout(() => {
          
                    labels.className = "hide";
                  }, 3000);
                }
              }, 3500 * (i + 1));
            }
    
            for (let i = 0; i < starCount; i++) {
          
              let star = new StarMore();
              star.randomColor();
              starArr.push(star);
            }
    
            showStars();
          };
    
          function initAnimate() {
          
            drawBg();
    
            lastTime = new Date();
            animate();
          }
    
          let lastTime;
          function animate() {
          
            ctx.save();
            ctx.globalCompositeOperation = "destination-out";
            ctx.globalAlpha = 0.1;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.restore();
    
            let newTime = new Date();
            if (newTime - lastTime > 200 + (window.innerHeight - 767) / 2) {
          
              let random = Math.random() * 100 > 2 ? true : false;
              let x = getRandom(canvas.width / 5, (canvas.width * 4) / 5);
              let y = getRandom(50, 200);
              if (random) {
          
                let bigboom = new Boom(
                  getRandom(canvas.width / 3, (canvas.width * 2) / 3),
                  2,
                  "#FFF",
                  {
           x: x, y: y }
                );
                bigbooms.push(bigboom);
              } else {
          
                let bigboom = new Boom(
                  getRandom(canvas.width / 3, (canvas.width * 2) / 3),
                  2,
                  "#FFF",
                  {
          
                    x: canvas.width / 2,
                    y: 200,
                  },
                  shapes[parseInt(getRandom(0, shapes.length))]
                );
                bigbooms.push(bigboom);
              }
              lastTime = newTime;
            }
    
            stars.foreach(function () {
          
              this.paint();
            });
    
            drawMoon();
    
            bigbooms.foreach(function (index) {
          
              let 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() {
          
            let moon = document.getElementById("moon");
            let centerX = canvas.width - 200,
              centerY = 100,
              width = 80;
            if (moon.complete) {
          
              ctx.drawImage(moon, centerX, centerY, width, width);
            } else {
          
              moon.onload = function () {
          
                ctx.drawImage(moon, centerX, centerY, width, width);
              };
            }
            let index = 0;
            for (let 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();
            }
          }
    
          Array.prototype.foreach = function (callback) {
          
            for (let i = 0; i < this.length; i++) {
          
              if (this[i] !== null) callback.apply(this[i], [i]);
            }
          };
    
          let raf =
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
          
              window.setTimeout(callback, 1000 / 10);
            };
    
          canvas.onclick = function () {
          
            let x = event.clientX;
            let y = event.clientY;
            let bigboom = new Boom(
              getRandom(canvas.width / 3, (canvas.width * 2) / 3),
              2,
              "#FFF",
              {
           x: x, y: y }
            );
            bigbooms.push(bigboom);
          };
    
          let Boom = function (x, r, c, boomArea, shape) {
          
            this.booms = [];
            this.x = x;
            this.y = canvas.height + r;
            this.r = r;
            this.c = c;
            this.shape = shape || false;
            this.boomArea = boomArea;
            this.theta = 0;
            this.dead = false;
            this.ba = parseInt(getRandom(80, 200));
    
            let audio = document.getElementsByTagName("audio");
            for (let i = 0; i < audio.length; i++) {
          
              if (
                audio[i].src.indexOf("shotfire") >= 0 &&
                (audio[i].paused || audio[i].ended)
              ) {
          
                // audio[i].play();
                break;
              }
            }
          };
          Boom.prototype = {
          
            _paint: function () {
          
              ctx.save();
              ctx.beginPath();
              ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
              ctx.fillStyle = this.c;
              ctx.fill();
              ctx.restore();
            },
            _move: function () {
          
              let dx = this.boomArea.x - this.x,
                dy = this.boomArea.y - this.y;
              this.x = this.x + dx * 0.01;
              this.y = this.y + dy * 0.01;
    
              if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
          
                if (this.shape) {
          
                  this._shapBoom();
                } else this._boom();
                this.dead = true;
              } else {
          
                this._paint();
              }
            },
            _drawLight: function () {
          
              ctx.save();
              ctx.fillStyle = "rgba(255,228,150,0.3)";
              ctx.beginPath();
              ctx.arc(
                this.x,
                this.y,
                this.r + 3 * Math.random() + 1,
                0,
                2 * Math.PI
              );
              ctx.fill();
              ctx.restore();
            },
            _boom: function () {
          
              let fragNum = getRandom(100, 300);
              let style = getRandom(0, 10) >= 5 ? 1 : 2;
              let color;
              if (style === 1) {
          
                color = {
          
                  a: parseInt(getRandom(128, 255)),
                  b: parseInt(getRandom(128, 255)),
                  c: parseInt(getRandom(128, 255)),
                };
              }
    
              let fanwei = fragNum;
              let audio = document.getElementsByTagName("audio");
              for (let i = 0; i < audio.length; i++) {
          
                if (
                  audio[i].src.indexOf("boom") >= 0 &&
                  (audio[i].paused || audio[i].ended)
                ) {
          
                  // audio[i].play();
                  break;
                }
              }
              for (let i = 0; i < fragNum; i++) {
          
                if (style === 2) {
          
                  color = {
          
                    a: parseInt(getRandom(128, 255)),
                    b: parseInt(getRandom(128, 255)),
                    c: parseInt(getRandom(128, 255)),
                  };
                }
                let a = getRandom(-Math.PI, Math.PI);
                let x = getRandom(0, fanwei) * Math.cos(a) + this.x;
                let y = getRandom(0, fanwei) * Math.sin(a) + this.y;
                let radius = getRandom(0, 2);
                let frag = new Frag(this.x, this.y, radius, color, x, y);
                this.booms.push(frag);
              }
            },
            _shapBoom: function () {
          
              let that = this;
              putValue(ocas, octx, this.shape, 5, function (dots) {
          
                let dx = canvas.width / 2 - that.x;
                let dy = canvas.height / 2 - that.y;
                for (let i = 0; i < dots.length; i++) {
          
                  color = {
           a: dots[i].a, b: dots[i].b, c: dots[i].c };
                  let x = dots[i].x;
                  let y = dots[i].y;
                  let radius = 1;
                  let frag = new Frag(
                    that.x,
                    that.y,
                    radius,
                    color,
                    x - dx,
                    y - dy
                  );
                  that.booms.push(frag);
                }
              });
            },
          };
    
          function putValue(canvas, context, ele, dr, callback) {
          
            context.clearRect(0, 0, canvas.width, canvas.height);
            let img = new Image();
            if (ele.indexOf("img") >= 0) {
          
              let _src = ele.split("$")[1];
              img.src = _src;
              imgload(img, function () {
          
                context.drawImage(
                  img,
                  canvas.width / 2 - img.width / 2,
                  canvas.height / 2 - img.width / 2
                );
                console.log("dots");
                dots = getimgData(canvas, context, dr);
                callback(dots);
              });
            } else {
          
              let text = ele;
              context.save();
              let fontSize = 128;
              context.font = fontSize + "px 宋体 bold";
              context.textAlign = "center";
              context.textBaseline = "middle";
              context.fillStyle =
                "rgba(" +
                parseInt(getRandom(128, 255)) +
                "," +
                parseInt(getRandom(128, 255)) +
                "," +
                parseInt(getRandom(128, 255)) +
                " , 1)";
              context.fillText(text, canvas.width / 2, canvas.height / 2);
              context.restore();
              dots = getimgData(canvas, context, dr);
              callback(dots);
            }
          }
    
          function imgload(img, callback) {
          
            if (img.complete) {
          
              callback.call(img);
            } else {
          
              img.onload = function () {
          
                callback.call(this);
              };
            }
          }
    
          function getimgData(canvas, context, dr) {
          
            let imgData = context.getImageData(0, 0, canvas.width, canvas.height);
            context.clearRect(0, 0, canvas.width, canvas.height);
            let dots = [];
            for (let x = 0; x < imgData.width; x += dr) {
          
              for (let y = 0; y < imgData.height; y += dr) {
          
                let i = (y * imgData.width + x) * 4;
                if (imgData.data[i + 3] > 128) {
          
                  let dot = {
          
                    x: x,
                    y: y,
                    a: imgData.data[i],
                    b: imgData.data[i + 1],
                    c: imgData.data[i + 2],
                  };
                  dots.push(dot);
                }
              }
            }
            return dots;
          }
    
          function getRandom(a, b) {
          
            return Math.random() * (b - a) + a;
          }
    
          let maxRadius = 1,
            stars = [];
          function drawBg() {
          
            for (let i = 0; i < 100; i++) {
          
              let r = Math.random() * maxRadius;
              let x = Math.random() * canvas.width;
              let y = Math.random() * 2 * canvas.height - canvas.height;
              let star = new Star(x, y, r);
              stars.push(star);
              star.paint();
            }
          }
    
          let Star = function (x, y, r) {
          
            this.x = x;
            this.y = y;
            this.r = r;
          };
          Star.prototype = {
          
            paint: function () {
          
              ctx.save();
              ctx.beginPath();
              ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
              ctx.fillStyle = "rgba(255,255,255," + this.r + ")";
              ctx.fill();
              ctx.restore();
            },
          };
    
          let focallength = 250;
          let Frag = function (centerX, centerY, radius, color, tx, ty) {
          
            this.tx = tx;
            this.ty = ty;
            this.x = centerX;
            this.y = centerY;
            this.dead = false;
            this.centerX = centerX;
            this.centerY = centerY;
            this.radius = radius;
            this.color = color;
          };
    
          Frag.prototype = {
          
            paint: function () {
          
              // ctx.beginPath();
              // ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
              ctx.fillStyle =
                "rgba(" +
                this.color.a +
                "," +
                this.color.b +
                "," +
                this.color.c +
                ",1)";
              ctx.fillRect(
                this.x - this.radius,
                this.y - this.radius,
                this.radius * 2,
                this.radius * 2
              );
            },
            moveTo: function (index) {
          
              this.ty = this.ty + 0.3;
              let dx = this.tx - this.x,
                dy = this.ty - this.y;
              this.x = Math.abs(dx) < 0.1 ? this.tx : this.x + dx * 0.1;
              this.y = Math.abs(dy) < 0.1 ? this.ty : this.y + dy * 0.1;
              if (dx === 0 && Math.abs(dy) <= 80) {
          
                this.dead = true;
              }
              this.paint();
            },
          };
    
          let StarMore = function () {
          
            this.x = window.innerWidth * Math.random();
            this.y = 5000 * Math.random();
            this.text = ".";
            this.color = "white";
            this.randomColor = function () {
          
              let _r = Math.random();
              if (_r < 0.5) {
          
                this.color = "#333";
              } else {
          
                this.color = "white";
              }
            };
          };
          function showStars() {
          
            let canvas = document.getElementById("cas");
            context = canvas.getContext("2d");
    
            for (let n = 0; n < starCount; n++) {
          
              starArr[n].randomColor();
              context.fillStyle = starArr[n].color;
              context.fillText(starArr[n].text, starArr[n].x, starArr[n].y);
            }
    
            setTimeout("showStars()", 100);
          }
    
          // 代码参考来源：https://github.com/AndersonHJB/YearTiger2022
        </script>
      </body>
    </html>

[ded7fd5ac30542a4b6666a391fa6a9e4.png]: https://img-blog.csdnimg.cn/ded7fd5ac30542a4b6666a391fa6a9e4.png