devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

(三款)Html5+Css+JavaScript实现2023年跨年代码烟花设计_跨年代码可复制2024

作者：我家小花儿 | 2024-02-15 15:12:53

赞

踩

跨年代码可复制2024

简介

一共是三款烟花设计

Html5+Css+JavaScript实现2023年跨年代码烟花设计

主题

 

第一款

（有雪花设计没有音乐）

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>计算机基础与编程</title>
  6.  
  7.     <style>
  8.       html,
  9.       body {
  10.         margin: 0px;
  11.         width: 100%;
  12.         height: 100%;
  13.         overflow: hidden;
  14.         background: #000;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.    
  20.     <canvas
  21.       id="canvas"
  22.       style="position: absolute; width: 100%; height: 100%; z-index: 8888"
  23.     ></canvas>
  24.     <canvas
  25.       style="position: absolute; width: 100%; height: 100%; z-index: 9999"
  26.       class="canvas"
  27.     ></canvas>
  28.     <div class="overlay">
  29.       <div class="tabs">
  30.         <div class="tabs-labels">
  31.           <span class="tabs-label">Commands</span
  32.           ><span class="tabs-label">Info</span
  33.           ><span class="tabs-label">Share</span>
  34.         </div>
  35.  
  36.         <div class="tabs-panels">
  37.           <ul class="tabs-panel commands"></ul>
  38.         </div>
  39.       </div>
  40.     </div>
  41.     <script>
  42.       function initVars() {
  43.         pi = Math.PI;
  44.         ctx = canvas.getContext("2d");
  45.         canvas.width = canvas.clientWidth;
  46.         canvas.height = canvas.clientHeight;
  47.         cx = canvas.width / 2;
  48.         cy = canvas.height / 2;
  49.         playerZ = -25;
  50.         playerX =
  51.           playerY =
  52.           playerVX =
  53.           playerVY =
  54.           playerVZ =
  55.           pitch =
  56.           yaw =
  57.           pitchV =
  58.           yawV =
  59.             0;
  60.         scale = 600;
  61.         seedTimer = 0;
  62.         (seedInterval = 5), (seedLife = 100);
  63.         gravity = 0.02;
  64.         seeds = new Array();
  65.         sparkPics = new Array();
  66.         s = "https://cantelope.org/NYE/";
  67.         for (i = 1; i <= 10; ++i) {
  68.           sparkPic = new Image();
  69.           sparkPic.src = s + "spark" + i + ".png";
  70.           sparkPics.push(sparkPic);
  71.         }
  72.         sparks = new Array();
  73.         pow1 = new Audio(s + "pow1.ogg");
  74.         pow2 = new Audio(s + "pow2.ogg");
  75.         pow3 = new Audio(s + "pow3.ogg");
  76.         pow4 = new Audio(s + "pow4.ogg");
  77.         frames = 0;
  78.       }
  79.  
  80.       function rasterizePoint(x, y, z) {
  81.         var p, d;
  82.         x -= playerX;
  83.         y -= playerY;
  84.         z -= playerZ;
  85.         p = Math.atan2(x, z);
  86.         d = Math.sqrt(x * x + z * z);
  87.         x = Math.sin(p - yaw) * d;
  88.         z = Math.cos(p - yaw) * d;
  89.         p = Math.atan2(y, z);
  90.         d = Math.sqrt(y * y + z * z);
  91.         y = Math.sin(p - pitch) * d;
  92.         z = Math.cos(p - pitch) * d;
  93.         var rx1 = -1000,
  94.           ry1 = 1,
  95.           rx2 = 1000,
  96.           ry2 = 1,
  97.           rx3 = 0,
  98.           ry3 = 0,
  99.           rx4 = x,
  100.           ry4 = z,
  101.           uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
  102.         if (!uc) return { x: 0, y: 0, d: -1 };
  103.         var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
  104.         var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
  105.         if (!z) z = 0.000000001;
  106.         if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
  107.           return {
  108.             x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
  109.             y: cy + (y / z) * scale,
  110.             d: Math.sqrt(x * x + y * y + z * z),
  111.           };
  112.         } else {
  113.           return {
  114.             x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
  115.             y: cy + (y / z) * scale,
  116.             d: -1,
  117.           };
  118.         }
  119.       }
  120.  
  121.       function spawnSeed() {
  122.         seed = new Object();
  123.         seed.x = -50 + Math.random() * 100;
  124.         seed.y = 25;
  125.         seed.z = -50 + Math.random() * 100;
  126.         seed.vx = 0.1 - Math.random() * 0.2;
  127.         seed.vy = -1.5; //*(1+Math.random()/2);
  128.         seed.vz = 0.1 - Math.random() * 0.2;
  129.         seed.born = frames;
  130.         seeds.push(seed);
  131.       }
  132.  
  133.       function splode(x, y, z) {
  134.         t = 5 + parseInt(Math.random() * 150);
  135.         sparkV = 1 + Math.random() * 2.5;
  136.         type = parseInt(Math.random() * 3);
  137.         switch (type) {
  138.           case 0:
  139.             pic1 = parseInt(Math.random() * 10);
  140.             break;
  141.           case 1:
  142.             pic1 = parseInt(Math.random() * 10);
  143.             do {
  144.               pic2 = parseInt(Math.random() * 10);
  145.             } while (pic2 == pic1);
  146.             break;
  147.           case 2:
  148.             pic1 = parseInt(Math.random() * 10);
  149.             do {
  150.               pic2 = parseInt(Math.random() * 10);
  151.             } while (pic2 == pic1);
  152.             do {
  153.               pic3 = parseInt(Math.random() * 10);
  154.             } while (pic3 == pic1 || pic3 == pic2);
  155.             break;
  156.         }
  157.         for (m = 1; m < t; ++m) {
  158.           spark = new Object();
  159.           spark.x = x;
  160.           spark.y = y;
  161.           spark.z = z;
  162.           p1 = pi * 2 * Math.random();
  163.           p2 = pi * Math.random();
  164.           v = sparkV * (1 + Math.random() / 6);
  165.           spark.vx = Math.sin(p1) * Math.sin(p2) * v;
  166.           spark.vz = Math.cos(p1) * Math.sin(p2) * v;
  167.           spark.vy = Math.cos(p2) * v;
  168.           switch (type) {
  169.             case 0:
  170.               spark.img = sparkPics[pic1];
  171.               break;
  172.             case 1:
  173.               spark.img = sparkPics[parseInt(Math.random() * 2) ? pic1 : pic2];
  174.               break;
  175.             case 2:
  176.               switch (parseInt(Math.random() * 3)) {
  177.                 case 0:
  178.                   spark.img = sparkPics[pic1];
  179.                   break;
  180.                 case 1:
  181.                   spark.img = sparkPics[pic2];
  182.                   break;
  183.                 case 2:
  184.                   spark.img = sparkPics[pic3];
  185.                   break;
  186.               }
  187.               break;
  188.           }
  189.           spark.radius = 25 + Math.random() * 50;
  190.           spark.alpha = 1;
  191.           spark.trail = new Array();
  192.           sparks.push(spark);
  193.         }
  194.         switch (parseInt(Math.random() * 4)) {
  195.           case 0:
  196.             pow = new Audio(s + "pow1.ogg");
  197.             break;
  198.           case 1:
  199.             pow = new Audio(s + "pow2.ogg");
  200.             break;
  201.           case 2:
  202.             pow = new Audio(s + "pow3.ogg");
  203.             break;
  204.           case 3:
  205.             pow = new Audio(s + "pow4.ogg");
  206.             break;
  207.         }
  208.         d = Math.sqrt(
  209.           (x - playerX) * (x - playerX) +
  210.             (y - playerY) * (y - playerY) +
  211.             (z - playerZ) * (z - playerZ)
  212.         );
  213.         pow.volume = 1.5 / (1 + d / 10);
  214.         pow.play();
  215.       }
  216.  
  217.       function doLogic() {
  218.         if (seedTimer < frames) {
  219.           seedTimer = frames + seedInterval * Math.random() * 10;
  220.           spawnSeed();
  221.         }
  222.         for (i = 0; i < seeds.length; ++i) {
  223.           seeds[i].vy += gravity;
  224.           seeds[i].x += seeds[i].vx;
  225.           seeds[i].y += seeds[i].vy;
  226.           seeds[i].z += seeds[i].vz;
  227.           if (frames - seeds[i].born > seedLife) {
  228.             splode(seeds[i].x, seeds[i].y, seeds[i].z);
  229.             seeds.splice(i, 1);
  230.           }
  231.         }
  232.         for (i = 0; i < sparks.length; ++i) {
  233.           if (sparks[i].alpha > 0 && sparks[i].radius > 5) {
  234.             sparks[i].alpha -= 0.01;
  235.             sparks[i].radius /= 1.02;
  236.             sparks[i].vy += gravity;
  237.             point = new Object();
  238.             point.x = sparks[i].x;
  239.             point.y = sparks[i].y;
  240.             point.z = sparks[i].z;
  241.             if (sparks[i].trail.length) {
  242.               x = sparks[i].trail[sparks[i].trail.length - 1].x;
  243.               y = sparks[i].trail[sparks[i].trail.length - 1].y;
  244.               z = sparks[i].trail[sparks[i].trail.length - 1].z;
  245.               d =
  246.                 (point.x - x) * (point.x - x) +
  247.                 (point.y - y) * (point.y - y) +
  248.                 (point.z - z) * (point.z - z);
  249.               if (d > 9) {
  250.                 sparks[i].trail.push(point);
  251.               }
  252.             } else {
  253.               sparks[i].trail.push(point);
  254.             }
  255.             if (sparks[i].trail.length > 5) sparks[i].trail.splice(0, 1);
  256.             sparks[i].x += sparks[i].vx;
  257.             sparks[i].y += sparks[i].vy;
  258.             sparks[i].z += sparks[i].vz;
  259.             sparks[i].vx /= 1.075;
  260.             sparks[i].vy /= 1.075;
  261.             sparks[i].vz /= 1.075;
  262.           } else {
  263.             sparks.splice(i, 1);
  264.           }
  265.         }
  266.         p = Math.atan2(playerX, playerZ);
  267.         d = Math.sqrt(playerX * playerX + playerZ * playerZ);
  268.         d += Math.sin(frames / 80) / 1.25;
  269.         t = Math.sin(frames / 200) / 40;
  270.         playerX = Math.sin(p + t) * d;
  271.         playerZ = Math.cos(p + t) * d;
  272.         yaw = pi + p + t;
  273.       }
  274.  
  275.       function rgb(col) {
  276.         var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16);
  277.         var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16);
  278.         var b = parseInt((0.5 - Math.sin(col) * 0.5) * 16);
  279.         return "#" + r.toString(16) + g.toString(16) + b.toString(16);
  280.       }
  281.  
  282.       function draw() {
  283.         ctx.clearRect(0, 0, cx * 2, cy * 2);
  284.  
  285.         ctx.fillStyle = "#ff8";
  286.         for (i = -100; i < 100; i += 3) {
  287.           for (j = -100; j < 100; j += 4) {
  288.             x = i;
  289.             z = j;
  290.             y = 25;
  291.             point = rasterizePoint(x, y, z);
  292.             if (point.d != -1) {
  293.               size = 250 / (1 + point.d);
  294.               d = Math.sqrt(x * x + z * z);
  295.               a = 0.75 - Math.pow(d / 100, 6) * 0.75;
  296.               if (a > 0) {
  297.                 ctx.globalAlpha = a;
  298.                 ctx.fillRect(
  299.                   point.x - size / 2,
  300.                   point.y - size / 2,
  301.                   size,
  302.                   size
  303.                 );
  304.               }
  305.             }
  306.           }
  307.         }
  308.         ctx.globalAlpha = 1;
  309.         for (i = 0; i < seeds.length; ++i) {
  310.           point = rasterizePoint(seeds[i].x, seeds[i].y, seeds[i].z);
  311.           if (point.d != -1) {
  312.             size = 200 / (1 + point.d);
  313.             ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
  314.           }
  315.         }
  316.         point1 = new Object();
  317.         for (i = 0; i < sparks.length; ++i) {
  318.           point = rasterizePoint(sparks[i].x, sparks[i].y, sparks[i].z);
  319.           if (point.d != -1) {
  320.             size = (sparks[i].radius * 200) / (1 + point.d);
  321.             if (sparks[i].alpha < 0) sparks[i].alpha = 0;
  322.             if (sparks[i].trail.length) {
  323.               point1.x = point.x;
  324.               point1.y = point.y;
  325.               switch (sparks[i].img) {
  326.                 case sparkPics[0]:
  327.                   ctx.strokeStyle = "#f84";
  328.                   break;
  329.                 case sparkPics[1]:
  330.                   ctx.strokeStyle = "#84f";
  331.                   break;
  332.                 case sparkPics[2]:
  333.                   ctx.strokeStyle = "#8ff";
  334.                   break;
  335.                 case sparkPics[3]:
  336.                   ctx.strokeStyle = "#fff";
  337.                   break;
  338.                 case sparkPics[4]:
  339.                   ctx.strokeStyle = "#4f8";
  340.                   break;
  341.                 case sparkPics[5]:
  342.                   ctx.strokeStyle = "#f44";
  343.                   break;
  344.                 case sparkPics[6]:
  345.                   ctx.strokeStyle = "#f84";
  346.                   break;
  347.                 case sparkPics[7]:
  348.                   ctx.strokeStyle = "#84f";
  349.                   break;
  350.                 case sparkPics[8]:
  351.                   ctx.strokeStyle = "#fff";
  352.                   break;
  353.                 case sparkPics[9]:
  354.                   ctx.strokeStyle = "#44f";
  355.                   break;
  356.               }
  357.               for (j = sparks[i].trail.length - 1; j >= 0; --j) {
  358.                 point2 = rasterizePoint(
  359.                   sparks[i].trail[j].x,
  360.                   sparks[i].trail[j].y,
  361.                   sparks[i].trail[j].z
  362.                 );
  363.                 if (point2.d != -1) {
  364.                   ctx.globalAlpha =
  365.                     ((j / sparks[i].trail.length) * sparks[i].alpha) / 2;
  366.                   ctx.beginPath();
  367.                   ctx.moveTo(point1.x, point1.y);
  368.                   ctx.lineWidth =
  369.                     1 +
  370.                     (sparks[i].radius * 10) /
  371.                       (sparks[i].trail.length - j) /
  372.                       (1 + point2.d);
  373.                   ctx.lineTo(point2.x, point2.y);
  374.                   ctx.stroke();
  375.                   point1.x = point2.x;
  376.                   point1.y = point2.y;
  377.                 }
  378.               }
  379.             }
  380.             ctx.globalAlpha = sparks[i].alpha;
  381.             ctx.drawImage(
  382.               sparks[i].img,
  383.               point.x - size / 2,
  384.               point.y - size / 2,
  385.               size,
  386.               size
  387.             );
  388.           }
  389.         }
  390.       }
  391.  
  392.       function frame() {
  393.         if (frames > 100000) {
  394.           seedTimer = 0;
  395.           frames = 0;
  396.         }
  397.         frames++;
  398.         draw();
  399.         doLogic();
  400.         requestAnimationFrame(frame);
  401.       }
  402.  
  403.       window.addEventListener("resize", () => {
  404.         canvas.width = canvas.clientWidth;
  405.         canvas.height = canvas.clientHeight;
  406.         cx = canvas.width / 2;
  407.         cy = canvas.height / 2;
  408.       });
  409.  
  410.       initVars();
  411.       frame();
  412.     </script>
  413.     <script src="js/index.js"></script>
  414.     <div id="page_end_html">
  415.       <!--放大图片-->
  416.       <link
  417.         rel="stylesheet"
  418.         type="text/css"
  419.         href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css"
  420.       />
  421.       <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  422.       <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
  423.       <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>
  424.       <script type="text/javascript">
  425.         $("#cnblogs_post_body img").attr("data-action", "zoom");
  426.       </script>
  427.       <!--放大图片end-->
  428.     
  429.       <!--鼠标特效-->
  430.       <script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
  431.       <canvas
  432.         width="1777"
  433.         height="841"
  434.         style="
  435.           position: fixed;
  436.           left: 0px;
  437.           top: 0px;
  438.           z-index: 2147483647;
  439.           pointer-events: none;
  440.         "
  441.       ></canvas>
  442.       <!--鼠标特效 end-->
  443.       <!-- require APlayer -->
  444.       <link
  445.         rel="stylesheet"
  446.         href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"
  447.       />
  448.       <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  449.       <!-- require MetingJS -->
  450.       <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
  451.     
  452.       <!-- // 随机线条 -->
  453.       <script>
  454.         !(function () {
  455.           function n(n, e, t) {
  456.             return n.getAttribute(e) || t;
  457.           }
  458.           function e(n) {
  459.             return document.getElementsByTagName(n);
  460.           }
  461.           function t() {
  462.             var t = e("script"),
  463.               o = t.length,
  464.               i = t[o - 1];
  465.             return {
  466.               l: o,
  467.               z: n(i, "zIndex", -1),
  468.               o: n(i, "opacity", 0.6),
  469.               c: n(i, "color", "148,0,211"),
  470.               n: n(i, "count", 99),
  471.             };
  472.           }
  473.           function o() {
  474.             (a = m.width =
  475.               window.innerWidth ||
  476.               document.documentElement.clientWidth ||
  477.               document.body.clientWidth),
  478.               (c = m.height =
  479.                 window.innerHeight ||
  480.                 document.documentElement.clientHeight ||
  481.                 document.body.clientHeight);
  482.           }
  483.           function i() {
  484.             r.clearRect(0, 0, a, c);
  485.             var n, e, t, o, m, l;
  486.             s.forEach(function (i, x) {
  487.               for (
  488.                 i.x += i.xa,
  489.                   i.y += i.ya,
  490.                   i.xa *= i.x > a || i.x < 0 ? -1 : 1,
  491.                   i.ya *= i.y > c || i.y < 0 ? -1 : 1,
  492.                   r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1),
  493.                   e = x + 1;
  494.                 e < u.length;
  495.                 e++
  496.               )
  497.                 (n = u[e]),
  498.                   null !== n.x &&
  499.                     null !== n.y &&
  500.                     ((o = i.x - n.x),
  501.                     (m = i.y - n.y),
  502.                     (l = o * o + m * m),
  503.                     l < n.max &&
  504.                       (n === y &&
  505.                         l >= n.max / 2 &&
  506.                         ((i.x -= 0.03 * o), (i.y -= 0.03 * m)),
  507.                       (t = (n.max - l) / n.max),
  508.                       r.beginPath(),
  509.                       (r.lineWidth = t / 2),
  510.                       (r.strokeStyle = "rgba(" + d.c + "," + (t + 0.2) + ")"),
  511.                       r.moveTo(i.x, i.y),
  512.                       r.lineTo(n.x, n.y),
  513.                       r.stroke()));
  514.             }),
  515.               x(i);
  516.           }
  517.           var a,
  518.             c,
  519.             u,
  520.             m = document.createElement("canvas"),
  521.             d = t(),
  522.             l = "c_n" + d.l,
  523.             r = m.getContext("2d"),
  524.             x =
  525.               window.requestAnimationFrame ||
  526.               window.webkitRequestAnimationFrame ||
  527.               window.mozRequestAnimationFrame ||
  528.               window.oRequestAnimationFrame ||
  529.               window.msRequestAnimationFrame ||
  530.               function (n) {
  531.                 window.setTimeout(n, 1e3 / 45);
  532.               },
  533.             w = Math.random,
  534.             y = { x: null, y: null, max: 2e4 };
  535.           (m.id = l),
  536.             (m.style.cssText =
  537.               "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
  538.             e("body")[0].appendChild(m),
  539.             o(),
  540.             (window.onresize = o),
  541.             (window.onmousemove = function (n) {
  542.               (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
  543.             }),
  544.             (window.onmouseout = function () {
  545.               (y.x = null), (y.y = null);
  546.             });
  547.           for (var s = [], f = 0; d.n > f; f++) {
  548.             var h = w() * a,
  549.               g = w() * c,
  550.               v = 2 * w() - 1,
  551.               p = 2 * w() - 1;
  552.             s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 });
  553.           }
  554.           (u = s.concat([y])),
  555.             setTimeout(function () {
  556.               i();
  557.             }, 100);
  558.         })();
  559.       </script>
  560.     
  561.       <!-- 雪花特效 -->
  562.       <script type="text/javascript">
  563.         (function ($) {
  564.           $.fn.snow = function (options) {
  565.             var $flake = $('<div id="snowbox" />')
  566.                 .css({ position: "absolute", "z-index": "9999", top: "-50px" })
  567.                 .html("❄"),
  568.               documentHeight = $(document).height(),
  569.               documentWidth = $(document).width(),
  570.               defaults = {
  571.                 minSize: 10,
  572.                 maxSize: 20,
  573.                 newOn: 1000,
  574.                 flakeColor:
  575.                   "#00CED1" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */,
  576.               },
  577.               options = $.extend({}, defaults, options);
  578.             var interval = setInterval(function () {
  579.               var startPositionLeft = Math.random() * documentWidth - 100,
  580.                 startOpacity = 0.5 + Math.random(),
  581.                 sizeFlake = options.minSize + Math.random() * options.maxSize,
  582.                 endPositionTop = documentHeight - 200,
  583.                 endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  584.                 durationFall = documentHeight * 10 + Math.random() * 5000;
  585.               $flake
  586.                 .clone()
  587.                 .appendTo("body")
  588.                 .css({
  589.                   left: startPositionLeft,
  590.                   opacity: startOpacity,
  591.                   "font-size": sizeFlake,
  592.                   color: options.flakeColor,
  593.                 })
  594.                 .animate(
  595.                   {
  596.                     top: endPositionTop,
  597.                     left: endPositionLeft,
  598.                     opacity: 0.2,
  599.                   },
  600.                   durationFall,
  601.                   "linear",
  602.                   function () {
  603.                     $(this).remove();
  604.                   }
  605.                 );
  606.             }, options.newOn);
  607.           };
  608.         })(jQuery);
  609.         $(function () {
  610.           $.fn.snow({
  611.             minSize: 5 /* 定义雪花最小尺寸 */,
  612.             maxSize: 80 /* 定义雪花最大尺寸 */,
  613.             newOn: 200 /* 定义密集程度，数字越小越密集 */,
  614.           });
  615.         });
  616.       </script>
  617.   </body>
  618. </html>

index.js

 

  1.  
  2.  
  3. var S = {
  4.   init: function () {
  5.     var action = window.location.href,
  6.         i = action.indexOf('?a=');
  7.  
  8.     S.Drawing.init('.canvas');
  9.     document.body.classList.add('body--ready');
  10.  
  11.     if (i !== -1) {
  12.       S.UI.simulate(decodeURI(action).substring(i + 3));
  13.     } else {
  14.       S.UI.simulate('|#countdown 3||2023|新年快乐||#rectangle|');
  15.       // S.UI.simulate('|写|尽|千|山|落|笔|是|你|#rectangle|');
  16.     }
  17.  
  18.     S.Drawing.loop(function () {
  19.       S.Shape.render();
  20.     });
  21.   }
  22. };
  23.  
  24.  
  25. S.Drawing = (function () {
  26.   var canvas,
  27.       context,
  28.       renderFn
  29.       requestFrame = window.requestAnimationFrame       ||
  30.                      window.webkitRequestAnimationFrame ||
  31.                      window.mozRequestAnimationFrame    ||
  32.                      window.oRequestAnimationFrame      ||
  33.                      window.msRequestAnimationFrame     ||
  34.                      function(callback) {
  35.                        window.setTimeout(callback, 1000 / 60);
  36.                      };
  37.  
  38.   return {
  39.     init: function (el) {
  40.       canvas = document.querySelector(el);
  41.       context = canvas.getContext('2d');
  42.       this.adjustCanvas();
  43.  
  44.       window.addEventListener('resize', function (e) {
  45.         S.Drawing.adjustCanvas();
  46.       });
  47.     },
  48.  
  49.     loop: function (fn) {
  50.       renderFn = !renderFn ? fn : renderFn;
  51.       this.clearFrame();
  52.       renderFn();
  53.       requestFrame.call(window, this.loop.bind(this));
  54.     },
  55.  
  56.     adjustCanvas: function () {
  57.       canvas.width = window.innerWidth;
  58.       canvas.height = window.innerHeight;
  59.     },
  60.  
  61.     clearFrame: function () {
  62.       context.clearRect(0, 0, canvas.width, canvas.height);
  63.     },
  64.  
  65.     getArea: function () {
  66.       return { w: canvas.width, h: canvas.height };
  67.     },
  68.  
  69.     drawCircle: function (p, c) {
  70.       context.fillStyle = c.render();
  71.       context.beginPath();
  72.       context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
  73.       context.closePath();
  74.       context.fill();
  75.     }
  76.   }
  77. }());
  78.  
  79.  
  80. S.UI = (function () {
  81.   var canvas = document.querySelector('.canvas'),
  82.       interval,
  83.       isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
  84.       currentAction,
  85.       resizeTimer,
  86.       time,
  87.       maxShapeSize = 30,
  88.       firstAction = true,
  89.       sequence = [],
  90.       cmd = '#';
  91.  
  92.   function formatTime(date) {
  93.     var h = date.getHours(),
  94.         m = date.getMinutes(),
  95.     m = m < 10 ? '0' + m : m;
  96.     return h + ':' + m;
  97.   }
  98.  
  99.   function getValue(value) {
  100.     return value && value.split(' ')[1];
  101.   }
  102.  
  103.   function getAction(value) {
  104.     value = value && value.split(' ')[0];
  105.     return value && value[0] === cmd && value.substring(1);
  106.   }
  107.  
  108.   function timedAction(fn, delay, max, reverse) {
  109.     clearInterval(interval);
  110.     currentAction = reverse ? max : 1;
  111.     fn(currentAction);
  112.  
  113.     if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
  114.       interval = setInterval(function () {
  115.         currentAction = reverse ? currentAction - 1 : currentAction + 1;
  116.         fn(currentAction);
  117.  
  118.         if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
  119.           clearInterval(interval);
  120.         }
  121.       }, delay);
  122.     }
  123.   }
  124.  
  125.   function reset(destroy) {
  126.     clearInterval(interval);
  127.     sequence = [];
  128.     time = null;
  129.     destroy && S.Shape.switchShape(S.ShapeBuilder.letter(''));
  130.   }
  131.  
  132.   function performAction(value) {
  133.     var action,
  134.         value,
  135.         current;
  136.  
  137.     // overlay.classList.remove('overlay--visible');
  138.     sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
  139.     // input.value = '';
  140.     // checkInputWidth();
  141.  
  142.     timedAction(function (index) {
  143.       current = sequence.shift();
  144.       action = getAction(current);
  145.       value = getValue(current);
  146.  
  147.       switch (action) {
  148.         case 'countdown':
  149.           value = parseInt(value) || 10;
  150.           value = value > 0 ? value : 10;
  151.  
  152.           timedAction(function (index) {
  153.             if (index === 0) {
  154.               if (sequence.length === 0) {
  155.                 S.Shape.switchShape(S.ShapeBuilder.letter(''));
  156.               } else {
  157.                 performAction(sequence);
  158.               }
  159.             } else {
  160.               S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
  161.             }
  162.           }, 1000, value, true);
  163.           break;
  164.  
  165.         case 'rectangle':
  166.           value = value && value.split('x');
  167.           value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];
  168.  
  169.           S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));
  170.           break;
  171.  
  172.         case 'circle':
  173.           value = parseInt(value) || maxShapeSize;
  174.           value = Math.min(value, maxShapeSize);
  175.           S.Shape.switchShape(S.ShapeBuilder.circle(value));
  176.           break;
  177.  
  178.         case 'time':
  179.           var t = formatTime(new Date());
  180.  
  181.           if (sequence.length > 0) {
  182.             S.Shape.switchShape(S.ShapeBuilder.letter(t));
  183.           } else {
  184.             timedAction(function () {
  185.               t = formatTime(new Date());
  186.               if (t !== time) {
  187.                 time = t;
  188.                 S.Shape.switchShape(S.ShapeBuilder.letter(time));
  189.               }
  190.             }, 1000);
  191.           }
  192.           break;
  193.  
  194.         default:
  195.           S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
  196.       }
  197.     }, 2000, sequence.length);
  198.   }
  199.  
  200.   function checkInputWidth(e) {
  201.     if (input.value.length > 18) {
  202.       ui.classList.add('ui--wide');
  203.     } else {
  204.       ui.classList.remove('ui--wide');
  205.     }
  206.  
  207.     if (firstAction && input.value.length > 0) {
  208.       ui.classList.add('ui--enter');
  209.     } else {
  210.       ui.classList.remove('ui--enter');
  211.     }
  212.   }
  213.  
  214.   function bindEvents() {
  215.     document.body.addEventListener('keydown', function (e) {
  216.       input.focus();
  217.  
  218.       if (e.keyCode === 13) {
  219.         firstAction = false;
  220.         reset();
  221.         performAction(input.value);
  222.       }
  223.     });
  224.  
  225.     // input.addEventListener('input', checkInputWidth);
  226.     // input.addEventListener('change', checkInputWidth);
  227.     // input.addEventListener('focus', checkInputWidth);
  228.  
  229.     // help.addEventListener('click', function (e) {
  230.     //   overlay.classList.toggle('overlay--visible');
  231.     //   overlay.classList.contains('overlay--visible') && reset(true);
  232.     // });
  233.  
  234.     // commands.addEventListener('click', function (e) {
  235.     //   var el,
  236.     //       info,
  237.     //       demo,
  238.     //       tab,
  239.     //       active,
  240.     //       url;
  241.     //
  242.     //   if (e.target.classList.contains('commands-item')) {
  243.     //     el = e.target;
  244.     //   } else {
  245.     //     el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode;
  246.     //   }
  247.     //
  248.     //   info = el && el.querySelector('.commands-item-info');
  249.     //   demo = el && info.getAttribute('data-demo');
  250.     //   url = el && info.getAttribute('data-url');
  251.     //
  252.     //   if (info) {
  253.     //     overlay.classList.remove('overlay--visible');
  254.     //
  255.     //     if (demo) {
  256.     //       input.value = demo;
  257.     //
  258.     //       if (isTouch) {
  259.     //         reset();
  260.     //         performAction(input.value);
  261.     //       } else {
  262.     //         input.focus();
  263.     //       }
  264.     //     } else if (url) {
  265.     //       //window.location = url;
  266.     //     }
  267.     //   }
  268.     // });
  269.  
  270.     canvas.addEventListener('click', function (e) {
  271.       overlay.classList.remove('overlay--visible');
  272.     });
  273.   }
  274.  
  275.   function init() {
  276.     bindEvents();
  277.     // input.focus();
  278.     isTouch && document.body.classList.add('touch');
  279.   }
  280.  
  281.   // Init
  282.   init();
  283.  
  284.   return {
  285.     simulate: function (action) {
  286.       performAction(action);
  287.     }
  288.   }
  289. }());
  290.  
  291.  
  292. S.UI.Tabs = (function () {
  293.   var tabs = document.querySelector('.tabs'),
  294.       labels = document.querySelector('.tabs-labels'),
  295.       triggers = document.querySelectorAll('.tabs-label'),
  296.       panels = document.querySelectorAll('.tabs-panel');
  297.  
  298.   function activate(i) {
  299.     triggers[i].classList.add('tabs-label--active');
  300.     panels[i].classList.add('tabs-panel--active');
  301.   }
  302.  
  303.   function bindEvents() {
  304.     labels.addEventListener('click', function (e) {
  305.       var el = e.target,
  306.           index;
  307.  
  308.       if (el.classList.contains('tabs-label')) {
  309.         for (var t = 0; t < triggers.length; t++) {
  310.           triggers[t].classList.remove('tabs-label--active');
  311.           panels[t].classList.remove('tabs-panel--active');
  312.  
  313.           if (el === triggers[t]) {
  314.             index = t;
  315.           }
  316.         }
  317.  
  318.         activate(index);
  319.       }
  320.     });
  321.   }
  322.  
  323.   function init() {
  324.     activate(0);
  325.     bindEvents();
  326.   }
  327.  
  328.   // Init
  329.   init();
  330. }());
  331.  
  332.  
  333. S.Point = function (args) {
  334.   this.x = args.x;
  335.   this.y = args.y;
  336.   this.z = args.z;
  337.   this.a = args.a;
  338.   this.h = args.h;
  339. };
  340.  
  341.  
  342. S.Color = function (r, g, b, a) {
  343.   this.r = r;
  344.   this.g = g;
  345.   this.b = b;
  346.   this.a = a;
  347. };
  348.  
  349. S.Color.prototype = {
  350.   render: function () {
  351.     return 'rgba(' + this.r + ',' +  + this.g + ',' + this.b + ',' + this.a + ')';
  352.   }
  353. };
  354.  
  355.  
  356. S.Dot = function (x, y) {
  357.   this.p = new S.Point({
  358.     x: x,
  359.     y: y,
  360.     z: 5,
  361.     a: 1,
  362.     h: 0
  363.   });
  364.  
  365.   this.e = 0.07;
  366.   this.s = true;
  367.  
  368.   this.c = new S.Color(255, 255, 255, this.p.a);
  369.  
  370.   this.t = this.clone();
  371.   this.q = [];
  372. };
  373.  
  374. S.Dot.prototype = {
  375.   clone: function () {
  376.     return new S.Point({
  377.       x: this.x,
  378.       y: this.y,
  379.       z: this.z,
  380.       a: this.a,
  381.       h: this.h
  382.     });
  383.   },
  384.  
  385.   _draw: function () {
  386.     this.c.a = this.p.a;
  387.     S.Drawing.drawCircle(this.p, this.c);
  388.   },
  389.  
  390.   _moveTowards: function (n) {
  391.     var details = this.distanceTo(n, true),
  392.         dx = details[0],
  393.         dy = details[1],
  394.         d = details[2],
  395.         e = this.e * d;
  396.  
  397.     if (this.p.h === -1) {
  398.       this.p.x = n.x;
  399.       this.p.y = n.y;
  400.       return true;
  401.     }
  402.  
  403.     if (d > 1) {
  404.       this.p.x -= ((dx / d) * e);
  405.       this.p.y -= ((dy / d) * e);
  406.     } else {
  407.       if (this.p.h > 0) {
  408.         this.p.h--;
  409.       } else {
  410.         return true;
  411.       }
  412.     }
  413.  
  414.     return false;
  415.   },
  416.  
  417.   _update: function () {
  418.     if (this._moveTowards(this.t)) {
  419.       var p = this.q.shift();
  420.  
  421.       if (p) {
  422.         this.t.x = p.x || this.p.x;
  423.         this.t.y = p.y || this.p.y;
  424.         this.t.z = p.z || this.p.z;
  425.         this.t.a = p.a || this.p.a;
  426.         this.p.h = p.h || 0;
  427.       } else {
  428.         if (this.s) {
  429.           this.p.x -= Math.sin(Math.random() * 3.142);
  430.           this.p.y -= Math.sin(Math.random() * 3.142);
  431.         } else {
  432.           this.move(new S.Point({
  433.             x: this.p.x + (Math.random() * 50) - 25,
  434.             y: this.p.y + (Math.random() * 50) - 25,
  435.           }));
  436.         }
  437.       }
  438.     }
  439.  
  440.     d = this.p.a - this.t.a;
  441.     this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
  442.     d = this.p.z - this.t.z;
  443.     this.p.z = Math.max(1, this.p.z - (d * 0.05));
  444.   },
  445.  
  446.   distanceTo: function (n, details) {
  447.     var dx = this.p.x - n.x,
  448.         dy = this.p.y - n.y,
  449.         d = Math.sqrt(dx * dx + dy * dy);
  450.  
  451.     return details ? [dx, dy, d] : d;
  452.   },
  453.  
  454.   move: function (p, avoidStatic) {
  455.     if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
  456.       this.q.push(p);
  457.     }
  458.   },
  459.  
  460.   render: function () {
  461.     this._update();
  462.     this._draw();
  463.   }
  464. }
  465.  
  466.  
  467. S.ShapeBuilder = (function () {
  468.   var gap = 13,
  469.       shapeCanvas = document.createElement('canvas'),
  470.       shapeContext = shapeCanvas.getContext('2d'),
  471.       fontSize = 500,
  472.       fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
  473.  
  474.   function fit() {
  475.     shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;
  476.     shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;
  477.     shapeContext.fillStyle = 'red';
  478.     shapeContext.textBaseline = 'middle';
  479.     shapeContext.textAlign = 'center';
  480.   }
  481.  
  482.   function processCanvas() {
  483.     var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data;
  484.         dots = [],
  485.         pixels,
  486.         x = 0,
  487.         y = 0,
  488.         fx = shapeCanvas.width,
  489.         fy = shapeCanvas.height,
  490.         w = 0,
  491.         h = 0;
  492.  
  493.     for (var p = 0; p < pixels.length; p += (4 * gap)) {
  494.       if (pixels[p + 3] > 0) {
  495.         dots.push(new S.Point({
  496.           x: x,
  497.           y: y
  498.         }));
  499.  
  500.         w = x > w ? x : w;
  501.         h = y > h ? y : h;
  502.         fx = x < fx ? x : fx;
  503.         fy = y < fy ? y : fy;
  504.       }
  505.  
  506.       x += gap;
  507.  
  508.       if (x >= shapeCanvas.width) {
  509.         x = 0;
  510.         y += gap;
  511.         p += gap * 4 * shapeCanvas.width;
  512.       }
  513.     }
  514.  
  515.     return { dots: dots, w: w + fx, h: h + fy };
  516.   }
  517.  
  518.   function setFontSize(s) {
  519.     shapeContext.font = 'bold ' + s + 'px ' + fontFamily;
  520.   }
  521.  
  522.   function isNumber(n) {
  523.     return !isNaN(parseFloat(n)) && isFinite(n);
  524.   }
  525.  
  526.   function init() {
  527.     fit();
  528.     window.addEventListener('resize', fit);
  529.   }
  530.  
  531.   // Init
  532.   init();
  533.  
  534.   return {
  535.     imageFile: function (url, callback) {
  536.       var image = new Image(),
  537.           a = S.Drawing.getArea();
  538.  
  539.       image.onload = function () {
  540.         shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  541.         shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);
  542.         callback(processCanvas());
  543.       };
  544.  
  545.       image.onerror = function () {
  546.         callback(S.ShapeBuilder.letter('What?'));
  547.       }
  548.  
  549.       image.src = url;
  550.     },
  551.  
  552.     circle: function (d) {
  553.       var r = Math.max(0, d) / 2;
  554.       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  555.       shapeContext.beginPath();
  556.       shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);
  557.       shapeContext.fill();
  558.       shapeContext.closePath();
  559.  
  560.       return processCanvas();
  561.     },
  562.  
  563.     letter: function (l) {
  564.       var s = 0;
  565.  
  566.       setFontSize(fontSize);
  567.       s = Math.min(fontSize,
  568.                   (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize,
  569.                   (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
  570.       setFontSize(s);
  571.  
  572.       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  573.       shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);
  574.  
  575.       return processCanvas();
  576.     },
  577.  
  578.     rectangle: function (w, h) {
  579.       var dots = [],
  580.           width = gap * w,
  581.           height = gap * h;
  582.  
  583.       for (var y = 0; y < height; y += gap) {
  584.         for (var x = 0; x < width; x += gap) {
  585.           dots.push(new S.Point({
  586.             x: x,
  587.             y: y,
  588.           }));
  589.         }
  590.       }
  591.  
  592.       return { dots: dots, w: width, h: height };
  593.     }
  594.   };
  595. }());
  596.  
  597.  
  598. S.Shape = (function () {
  599.   var dots = [],
  600.       width = 0,
  601.       height = 0,
  602.       cx = 0,
  603.       cy = 0;
  604.  
  605.   function compensate() {
  606.     var a = S.Drawing.getArea();
  607.  
  608.     cx = a.w / 2 - width / 2;
  609.     cy = a.h / 2 - height / 2;
  610.   }
  611.  
  612.   return {
  613.     shuffleIdle: function () {
  614.       var a = S.Drawing.getArea();
  615.  
  616.       for (var d = 0; d < dots.length; d++) {
  617.         if (!dots[d].s) {
  618.           dots[d].move({
  619.             x: Math.random() * a.w,
  620.             y: Math.random() * a.h
  621.           });
  622.         }
  623.       }
  624.     },
  625.  
  626.     switchShape: function (n, fast) {
  627.       var size,
  628.           a = S.Drawing.getArea();
  629.  
  630.       width = n.w;
  631.       height = n.h;
  632.  
  633.       compensate();
  634.  
  635.       if (n.dots.length > dots.length) {
  636.         size = n.dots.length - dots.length;
  637.         for (var d = 1; d <= size; d++) {
  638.           dots.push(new S.Dot(a.w / 2, a.h / 2));
  639.         }
  640.       }
  641.  
  642.       var d = 0,
  643.           i = 0;
  644.  
  645.       while (n.dots.length > 0) {
  646.         i = Math.floor(Math.random() * n.dots.length);
  647.         dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);
  648.  
  649.         if (dots[d].s) {
  650.           dots[d].move(new S.Point({
  651.             z: Math.random() * 20 + 10,
  652.             a: Math.random(),
  653.             h: 18
  654.           }));
  655.         } else {
  656.           dots[d].move(new S.Point({
  657.             z: Math.random() * 5 + 5,
  658.             h: fast ? 18 : 30
  659.           }));
  660.         }
  661.  
  662.         dots[d].s = true;
  663.         dots[d].move(new S.Point({
  664.           x: n.dots[i].x + cx,
  665.           y: n.dots[i].y + cy,
  666.           a: 1,
  667.           z: 5,
  668.           h: 0
  669.         }));
  670.  
  671.         n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
  672.         d++;
  673.       }
  674.  
  675.       for (var i = d; i < dots.length; i++) {
  676.         if (dots[i].s) {
  677.           dots[i].move(new S.Point({
  678.             z: Math.random() * 20 + 10,
  679.             a: Math.random(),
  680.             h: 20
  681.           }));
  682.  
  683.           dots[i].s = false;
  684.           dots[i].e = 0.04;
  685.           dots[i].move(new S.Point({
  686.             x: Math.random() * a.w,
  687.             y: Math.random() * a.h,
  688.             a: 0.3, //.4
  689.             z: Math.random() * 4,
  690.             h: 0
  691.           }));
  692.         }
  693.       }
  694.     },
  695.  
  696.     render: function () {
  697.       for (var d = 0; d < dots.length; d++) {
  698.         dots[d].render();
  699.       }
  700.     }
  701.   }
  702. }());
  703.  
  704.  
  705. S.init();

关注文章底部微信公众号主页回复“2023新年烟花1”即可获取

 

第二款

（没有雪花设计有音乐）

源码分享

index.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>计算机基础与编程</title>
  6.  
  7. <style>
  8. html,body{
  9. 	margin:0px;
  10. 	width:100%;
  11. 	height:100%;
  12. 	overflow:hidden;
  13. 	background:#000;
  14. }
  15. </style>
  16.  
  17. </head>
  18. <body>
  19. <audio id="a1" loop="loop">
  20. 	<source src="https://music.163.com/song/media/outer/url?id=1877996649.mp3">
  21. </audio>
  22. <canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
  23. <canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas" ></canvas>
  24. <div class="overlay">
  25.   <div class="tabs">
  26.     <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>
  27.  
  28.     <div class="tabs-panels">
  29.       <ul class="tabs-panel commands">
  30.       </ul>
  31.     </div>
  32.   </div>
  33. </div>
  34. <script>
  35. window.onload=function () {
  36. 	let oA=document.querySelector("#a1");
  37. 	let timer=null;
  38. 	function autoPlay() {
  39. 		if (oA.paused) {
  40. 			oA.paused=false;
  41. 			oA.volume=0.5;
  42. 			oA.play();
  43. 		}else {
  44. 			clearInterval(timer);
  45. 		}
  46. 	}
  47. 	timer=setInterval(autoPlay,1);
  48. }
  49. function initVars(){
  50.  
  51. 	pi=Math.PI;
  52. 	ctx=canvas.getContext("2d");
  53. 	canvas.width=canvas.clientWidth;
  54. 	canvas.height=canvas.clientHeight;
  55. 	cx=canvas.width/2;
  56. 	cy=canvas.height/2;
  57. 	playerZ=-25;
  58. 	playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
  59. 	scale=600;
  60. 	seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
  61. 	seeds=new Array();
  62. 	sparkPics=new Array();
  63. 	s="https://cantelope.org/NYE/";
  64. 	for(i=1;i<=10;++i){
  65. 		sparkPic=new Image();
  66. 		sparkPic.src=s+"spark"+i+".png";
  67. 		sparkPics.push(sparkPic);
  68. 	}
  69. 	sparks=new Array();
  70. 	pow1=new Audio(s+"pow1.ogg");
  71. 	pow2=new Audio(s+"pow2.ogg");
  72. 	pow3=new Audio(s+"pow3.ogg");
  73. 	pow4=new Audio(s+"pow4.ogg");
  74. 	frames = 0;
  75. }
  76.  
  77. function rasterizePoint(x,y,z){
  78.  
  79. 	var p,d;
  80. 	x-=playerX;
  81. 	y-=playerY;
  82. 	z-=playerZ;
  83. 	p=Math.atan2(x,z);
  84. 	d=Math.sqrt(x*x+z*z);
  85. 	x=Math.sin(p-yaw)*d;
  86. 	z=Math.cos(p-yaw)*d;
  87. 	p=Math.atan2(y,z);
  88. 	d=Math.sqrt(y*y+z*z);
  89. 	y=Math.sin(p-pitch)*d;
  90. 	z=Math.cos(p-pitch)*d;
  91. 	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);
  92. 	if(!uc) return {x:0,y:0,d:-1};
  93. 	var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
  94. 	var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
  95. 	if(!z)z=.000000001;
  96. 	if(ua>0&&ua<1&&ub>0&&ub<1){
  97. 		return {
  98. 			x:cx+(rx1+ua*(rx2-rx1))*scale,
  99. 			y:cy+y/z*scale,
  100. 			d:Math.sqrt(x*x+y*y+z*z)
  101. 		};
  102. 	}else{
  103. 		return {
  104. 			x:cx+(rx1+ua*(rx2-rx1))*scale,
  105. 			y:cy+y/z*scale,
  106. 			d:-1
  107. 		};
  108. 	}
  109. }
  110.  
  111. function spawnSeed(){
  112.  
  113. 	seed=new Object();
  114. 	seed.x=-50+Math.random()*100;
  115. 	seed.y=25;
  116. 	seed.z=-50+Math.random()*100;
  117. 	seed.vx=.1-Math.random()*.2;
  118. 	seed.vy=-1.5;//*(1+Math.random()/2);
  119. 	seed.vz=.1-Math.random()*.2;
  120. 	seed.born=frames;
  121. 	seeds.push(seed);
  122. }
  123.  
  124. function splode(x,y,z){
  125.  
  126. 	t=5+parseInt(Math.random()*150);
  127. 	sparkV=1+Math.random()*2.5;
  128. 	type=parseInt(Math.random()*3);
  129. 	switch(type){
  130. 		case 0:
  131. 			pic1=parseInt(Math.random()*10);
  132. 			break;
  133. 		case 1:
  134. 			pic1=parseInt(Math.random()*10);
  135. 			do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
  136. 			break;
  137. 		case 2:
  138. 			pic1=parseInt(Math.random()*10);
  139. 			do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
  140. 			do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
  141. 			break;
  142. 	}
  143. 	for(m=1;m<t;++m){
  144. 		spark=new Object();
  145. 		spark.x=x; spark.y=y; spark.z=z;
  146. 		p1=pi*2*Math.random();
  147. 		p2=pi*Math.random();
  148. 		v=sparkV*(1+Math.random()/6)
  149. 		spark.vx=Math.sin(p1)*Math.sin(p2)*v;
  150. 		spark.vz=Math.cos(p1)*Math.sin(p2)*v;
  151. 		spark.vy=Math.cos(p2)*v;
  152. 		switch(type){
  153. 			case 0: spark.img=sparkPics[pic1]; break;
  154. 			case 1:
  155. 				spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
  156. 				break;
  157. 			case 2:
  158. 				switch(parseInt(Math.random()*3)){
  159. 					case 0: spark.img=sparkPics[pic1]; break;
  160. 					case 1: spark.img=sparkPics[pic2]; break;
  161. 					case 2: spark.img=sparkPics[pic3]; break;
  162. 				}
  163. 				break;
  164. 		}
  165. 		spark.radius=25+Math.random()*50;
  166. 		spark.alpha=1;
  167. 		spark.trail=new Array();
  168. 		sparks.push(spark);
  169. 	}
  170. 	switch(parseInt(Math.random()*4)){
  171. 		case 0:	pow=new Audio(s+"pow1.ogg"); break;
  172. 		case 1:	pow=new Audio(s+"pow2.ogg"); break;
  173. 		case 2:	pow=new Audio(s+"pow3.ogg"); break;
  174. 		case 3:	pow=new Audio(s+"pow4.ogg"); break;
  175. 	}
  176. 	d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
  177. 	pow.volume=1.5/(1+d/10);
  178. 	pow.play();
  179. }
  180.  
  181. function doLogic(){
  182.  
  183. 	if(seedTimer<frames){
  184. 		seedTimer=frames+seedInterval*Math.random()*10;
  185. 		spawnSeed();
  186. 	}
  187. 	for(i=0;i<seeds.length;++i){
  188. 		seeds[i].vy+=gravity;
  189. 		seeds[i].x+=seeds[i].vx;
  190. 		seeds[i].y+=seeds[i].vy;
  191. 		seeds[i].z+=seeds[i].vz;
  192. 		if(frames-seeds[i].born>seedLife){
  193. 			splode(seeds[i].x,seeds[i].y,seeds[i].z);
  194. 			seeds.splice(i,1);
  195. 		}
  196. 	}
  197. 	for(i=0;i<sparks.length;++i){
  198. 		if(sparks[i].alpha>0 && sparks[i].radius>5){
  199. 			sparks[i].alpha-=.01;
  200. 			sparks[i].radius/=1.02;
  201. 			sparks[i].vy+=gravity;
  202. 			point=new Object();
  203. 			point.x=sparks[i].x;
  204. 			point.y=sparks[i].y;
  205. 			point.z=sparks[i].z;
  206. 			if(sparks[i].trail.length){
  207. 				x=sparks[i].trail[sparks[i].trail.length-1].x;
  208. 				y=sparks[i].trail[sparks[i].trail.length-1].y;
  209. 				z=sparks[i].trail[sparks[i].trail.length-1].z;
  210. 				d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
  211. 				if(d>9){
  212. 					sparks[i].trail.push(point);
  213. 				}
  214. 			}else{
  215. 				sparks[i].trail.push(point);
  216. 			}
  217. 			if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);
  218. 			sparks[i].x+=sparks[i].vx;
  219. 			sparks[i].y+=sparks[i].vy;
  220. 			sparks[i].z+=sparks[i].vz;
  221. 			sparks[i].vx/=1.075;
  222. 			sparks[i].vy/=1.075;
  223. 			sparks[i].vz/=1.075;
  224. 		}else{
  225. 			sparks.splice(i,1);
  226. 		}
  227. 	}
  228. 	p=Math.atan2(playerX,playerZ);
  229. 	d=Math.sqrt(playerX*playerX+playerZ*playerZ);
  230. 	d+=Math.sin(frames/80)/1.25;
  231. 	t=Math.sin(frames/200)/40;
  232. 	playerX=Math.sin(p+t)*d;
  233. 	playerZ=Math.cos(p+t)*d;
  234. 	yaw=pi+p+t;
  235. }
  236.  
  237. function rgb(col){
  238.  
  239. 	var r = parseInt((.5+Math.sin(col)*.5)*16);
  240. 	var g = parseInt((.5+Math.cos(col)*.5)*16);
  241. 	var b = parseInt((.5-Math.sin(col)*.5)*16);
  242. 	return "#"+r.toString(16)+g.toString(16)+b.toString(16);
  243. }
  244.  
  245. function draw(){
  246.  
  247. 	ctx.clearRect(0,0,cx*2,cy*2);
  248.  
  249. 	ctx.fillStyle="#ff8";
  250. 	for(i=-100;i<100;i+=3){
  251. 		for(j=-100;j<100;j+=4){
  252. 			x=i;z=j;y=25;
  253. 			point=rasterizePoint(x,y,z);
  254. 			if(point.d!=-1){
  255. 				size=250/(1+point.d);
  256. 				d = Math.sqrt(x * x + z * z);
  257. 				a = 0.75 - Math.pow(d / 100, 6) * 0.75;
  258. 				if(a>0){
  259. 					ctx.globalAlpha = a;
  260. 					ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  261. 				}
  262. 			}
  263. 		}
  264. 	}
  265. 	ctx.globalAlpha=1;
  266. 	for(i=0;i<seeds.length;++i){
  267. 		point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
  268. 		if(point.d!=-1){
  269. 			size=200/(1+point.d);
  270. 			ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  271. 		}
  272. 	}
  273. 	point1=new Object();
  274. 	for(i=0;i<sparks.length;++i){
  275. 		point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
  276. 		if(point.d!=-1){
  277. 			size=sparks[i].radius*200/(1+point.d);
  278. 			if(sparks[i].alpha<0)sparks[i].alpha=0;
  279. 			if(sparks[i].trail.length){
  280. 				point1.x=point.x;
  281. 				point1.y=point.y;
  282. 				switch(sparks[i].img){
  283. 					case sparkPics[0]:ctx.strokeStyle="#f84";break;
  284. 					case sparkPics[1]:ctx.strokeStyle="#84f";break;
  285. 					case sparkPics[2]:ctx.strokeStyle="#8ff";break;
  286. 					case sparkPics[3]:ctx.strokeStyle="#fff";break;
  287. 					case sparkPics[4]:ctx.strokeStyle="#4f8";break;
  288. 					case sparkPics[5]:ctx.strokeStyle="#f44";break;
  289. 					case sparkPics[6]:ctx.strokeStyle="#f84";break;
  290. 					case sparkPics[7]:ctx.strokeStyle="#84f";break;
  291. 					case sparkPics[8]:ctx.strokeStyle="#fff";break;
  292. 					case sparkPics[9]:ctx.strokeStyle="#44f";break;
  293. 				}
  294. 				for(j=sparks[i].trail.length-1;j>=0;--j){
  295. 					point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
  296. 					if(point2.d!=-1){
  297. 						ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
  298. 						ctx.beginPath();
  299. 						ctx.moveTo(point1.x,point1.y);
  300. 						ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
  301. 						ctx.lineTo(point2.x,point2.y);
  302. 						ctx.stroke();
  303. 						point1.x=point2.x;
  304. 						point1.y=point2.y;
  305. 					}
  306. 				}
  307. 			}
  308. 			ctx.globalAlpha=sparks[i].alpha;
  309. 			ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
  310. 		}
  311. 	}
  312. }
  313.  
  314. function frame(){
  315.  
  316. 	if(frames>100000){
  317. 		seedTimer=0;
  318. 		frames=0;
  319. 	}
  320. 	frames++;
  321. 	draw();
  322. 	doLogic();
  323. 	requestAnimationFrame(frame);
  324. }
  325.  
  326. window.addEventListener("resize",()=>{
  327. 	canvas.width=canvas.clientWidth;
  328. 	canvas.height=canvas.clientHeight;
  329. 	cx=canvas.width/2;
  330. 	cy=canvas.height/2;
  331. });
  332.  
  333.  
  334. initVars();
  335. frame();
  336. </script>
  337. <script src="js/index.js"></script>
  338.  
  339. </body>
  340. </html>

index.js

  1.  
  2. /*
  4.   Shape Shifter
  5.   =============
  6.   A canvas experiment by Kenneth Cachia
  7.   http://www.kennethcachia.com
  9.   Updated code
  10.   ------------
  11.   https://github.com/kennethcachia/Shape-Shifter
  13. */
  14.  
  15.  
  16. var S = {
  17.   init: function () {
  18.     var action = window.location.href,
  19.         i = action.indexOf('?a=');
  20.  
  21.     S.Drawing.init('.canvas');
  22.     document.body.classList.add('body--ready');
  23.  
  24.     if (i !== -1) {
  25.       S.UI.simulate(decodeURI(action).substring(i + 3));
  26.     } else {
  27.       // 倒计时修改这句中的数字，不需要倒计时删除“|#countdown 3|”，换内容修改文字
  28.       S.UI.simulate('|#countdown 3||2023|新|年|快|乐|#rectangle|');
  29.     }
  30.  
  31.     S.Drawing.loop(function () {
  32.       S.Shape.render();
  33.     });
  34.   }
  35.   
  36. };
  37.  
  38.  
  39. S.Drawing = (function () {
  40.   var canvas,
  41.       context,
  42.       renderFn
  43.       requestFrame = window.requestAnimationFrame       ||
  44.                      window.webkitRequestAnimationFrame ||
  45.                      window.mozRequestAnimationFrame    ||
  46.                      window.oRequestAnimationFrame      ||
  47.                      window.msRequestAnimationFrame     ||
  48.                      function(callback) {
  49.                        window.setTimeout(callback, 1000 / 60);
  50.                      };
  51.  
  52.   return {
  53.     init: function (el) {
  54.       canvas = document.querySelector(el);
  55.       context = canvas.getContext('2d');
  56.       this.adjustCanvas();
  57.  
  58.       window.addEventListener('resize', function (e) {
  59.         S.Drawing.adjustCanvas();
  60.       });
  61.     },
  62.  
  63.     loop: function (fn) {
  64.       renderFn = !renderFn ? fn : renderFn;
  65.       this.clearFrame();
  66.       renderFn();
  67.       requestFrame.call(window, this.loop.bind(this));
  68.     },
  69.  
  70.     adjustCanvas: function () {
  71.       canvas.width = window.innerWidth;
  72.       canvas.height = window.innerHeight;
  73.     },
  74.  
  75.     clearFrame: function () {
  76.       context.clearRect(0, 0, canvas.width, canvas.height);
  77.     },
  78.  
  79.     getArea: function () {
  80.       return { w: canvas.width, h: canvas.height };
  81.     },
  82.  
  83.     drawCircle: function (p, c) {
  84.       context.fillStyle = c.render();
  85.       context.beginPath();
  86.       context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
  87.       context.closePath();
  88.       context.fill();
  89.     }
  90.   }
  91. }());
  92.  
  93.  
  94. S.UI = (function () {
  95.   var canvas = document.querySelector('.canvas'),
  96.       interval,
  97.       isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
  98.       currentAction,
  99.       resizeTimer,
  100.       time,
  101.       maxShapeSize = 30,
  102.       firstAction = true,
  103.       sequence = [],
  104.       cmd = '#';
  105.  
  106.   function formatTime(date) {
  107.     var h = date.getHours(),
  108.         m = date.getMinutes(),
  109.     m = m < 10 ? '0' + m : m;
  110.     return h + ':' + m;
  111.   }
  112.  
  113.   function getValue(value) {
  114.     return value && value.split(' ')[1];
  115.   }
  116.  
  117.   function getAction(value) {
  118.     value = value && value.split(' ')[0];
  119.     return value && value[0] === cmd && value.substring(1);
  120.   }
  121.  
  122.   function timedAction(fn, delay, max, reverse) {
  123.     clearInterval(interval);
  124.     currentAction = reverse ? max : 1;
  125.     fn(currentAction);
  126.  
  127.     if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
  128.       interval = setInterval(function () {
  129.         currentAction = reverse ? currentAction - 1 : currentAction + 1;
  130.         fn(currentAction);
  131.  
  132.         if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
  133.           clearInterval(interval);
  134.         }
  135.       }, delay);
  136.     }
  137.   }
  138.  
  139.   function reset(destroy) {
  140.     clearInterval(interval);
  141.     sequence = [];
  142.     time = null;
  143.     destroy && S.Shape.switchShape(S.ShapeBuilder.letter(''));
  144.   }
  145.  
  146.   function performAction(value) {
  147.     var action,
  148.         value,
  149.         current;
  150.  
  151.     // overlay.classList.remove('overlay--visible');
  152.     sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
  153.     // input.value = '';
  154.     // checkInputWidth();
  155.  
  156.     timedAction(function (index) {
  157.       current = sequence.shift();
  158.       action = getAction(current);
  159.       value = getValue(current);
  160.  
  161.       switch (action) {
  162.         case 'countdown':
  163.           value = parseInt(value) || 10;
  164.           value = value > 0 ? value : 10;
  165.  
  166.           timedAction(function (index) {
  167.             if (index === 0) {
  168.               if (sequence.length === 0) {
  169.                 S.Shape.switchShape(S.ShapeBuilder.letter(''));
  170.               } else {
  171.                 performAction(sequence);
  172.               }
  173.             } else {
  174.               S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
  175.             }
  176.           }, 1000, value, true);
  177.           break;
  178.  
  179.         case 'rectangle':
  180.           value = value && value.split('x');
  181.           value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];
  182.  
  183.           S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));
  184.           break;
  185.  
  186.         case 'circle':
  187.           value = parseInt(value) || maxShapeSize;
  188.           value = Math.min(value, maxShapeSize);
  189.           S.Shape.switchShape(S.ShapeBuilder.circle(value));
  190.           break;
  191.  
  192.         case 'time':
  193.           var t = formatTime(new Date());
  194.  
  195.           if (sequence.length > 0) {
  196.             S.Shape.switchShape(S.ShapeBuilder.letter(t));
  197.           } else {
  198.             timedAction(function () {
  199.               t = formatTime(new Date());
  200.               if (t !== time) {
  201.                 time = t;
  202.                 S.Shape.switchShape(S.ShapeBuilder.letter(time));
  203.               }
  204.             }, 1000);
  205.           }
  206.           break;
  207.  
  208.         default:
  209.           S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
  210.       }
  211.     }, 2000, sequence.length);
  212.   }
  213.  
  214.   function checkInputWidth(e) {
  215.     if (input.value.length > 18) {
  216.       ui.classList.add('ui--wide');
  217.     } else {
  218.       ui.classList.remove('ui--wide');
  219.     }
  220.  
  221.     if (firstAction && input.value.length > 0) {
  222.       ui.classList.add('ui--enter');
  223.     } else {
  224.       ui.classList.remove('ui--enter');
  225.     }
  226.   }
  227.  
  228.   function bindEvents() {
  229.     document.body.addEventListener('keydown', function (e) {
  230.       input.focus();
  231.  
  232.       if (e.keyCode === 13) {
  233.         firstAction = false;
  234.         reset();
  235.         performAction(input.value);
  236.       }
  237.     });
  238.  
  239.     // input.addEventListener('input', checkInputWidth);
  240.     // input.addEventListener('change', checkInputWidth);
  241.     // input.addEventListener('focus', checkInputWidth);
  242.  
  243.     // help.addEventListener('click', function (e) {
  244.     //   overlay.classList.toggle('overlay--visible');
  245.     //   overlay.classList.contains('overlay--visible') && reset(true);
  246.     // });
  247.  
  248.     // commands.addEventListener('click', function (e) {
  249.     //   var el,
  250.     //       info,
  251.     //       demo,
  252.     //       tab,
  253.     //       active,
  254.     //       url;
  255.     //
  256.     //   if (e.target.classList.contains('commands-item')) {
  257.     //     el = e.target;
  258.     //   } else {
  259.     //     el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode;
  260.     //   }
  261.     //
  262.     //   info = el && el.querySelector('.commands-item-info');
  263.     //   demo = el && info.getAttribute('data-demo');
  264.     //   url = el && info.getAttribute('data-url');
  265.     //
  266.     //   if (info) {
  267.     //     overlay.classList.remove('overlay--visible');
  268.     //
  269.     //     if (demo) {
  270.     //       input.value = demo;
  271.     //
  272.     //       if (isTouch) {
  273.     //         reset();
  274.     //         performAction(input.value);
  275.     //       } else {
  276.     //         input.focus();
  277.     //       }
  278.     //     } else if (url) {
  279.     //       //window.location = url;
  280.     //     }
  281.     //   }
  282.     // });
  283.  
  284.     canvas.addEventListener('click', function (e) {
  285.       overlay.classList.remove('overlay--visible');
  286.     });
  287.   }
  288.  
  289.   function init() {
  290.     bindEvents();
  291.     // input.focus();
  292.     isTouch && document.body.classList.add('touch');
  293.   }
  294.  
  295.   // Init
  296.   init();
  297.  
  298.   return {
  299.     simulate: function (action) {
  300.       performAction(action);
  301.     }
  302.   }
  303. }());
  304.  
  305.  
  306. S.UI.Tabs = (function () {
  307.   var tabs = document.querySelector('.tabs'),
  308.       labels = document.querySelector('.tabs-labels'),
  309.       triggers = document.querySelectorAll('.tabs-label'),
  310.       panels = document.querySelectorAll('.tabs-panel');
  311.  
  312.   function activate(i) {
  313.     triggers[i].classList.add('tabs-label--active');
  314.     panels[i].classList.add('tabs-panel--active');
  315.   }
  316.  
  317.   function bindEvents() {
  318.     labels.addEventListener('click', function (e) {
  319.       var el = e.target,
  320.           index;
  321.  
  322.       if (el.classList.contains('tabs-label')) {
  323.         for (var t = 0; t < triggers.length; t++) {
  324.           triggers[t].classList.remove('tabs-label--active');
  325.           panels[t].classList.remove('tabs-panel--active');
  326.  
  327.           if (el === triggers[t]) {
  328.             index = t;
  329.           }
  330.         }
  331.  
  332.         activate(index);
  333.       }
  334.       var a = document.getElementById("dd");
  335.       a.onload();
  336.       a.onplay();
  337.     });
  338.   }
  339.  
  340.   function init() {
  341.     activate(0);
  342.     bindEvents();
  343.   }
  344.  
  345.   // Init
  346.   init();
  347. }());
  348.  
  349.  
  350. S.Point = function (args) {
  351.   this.x = args.x;
  352.   this.y = args.y;
  353.   this.z = args.z;
  354.   this.a = args.a;
  355.   this.h = args.h;
  356. };
  357.  
  358.  
  359. S.Color = function (r, g, b, a) {
  360.   this.r = r;
  361.   this.g = g;
  362.   this.b = b;
  363.   this.a = a;
  364. };
  365.  
  366. S.Color.prototype = {
  367.   render: function () {
  368.     return 'rgba(' + this.r + ',' +  + this.g + ',' + this.b + ',' + this.a + ')';
  369.   }
  370. };
  371.  
  372.  
  373. S.Dot = function (x, y) {
  374.   this.p = new S.Point({
  375.     x: x,
  376.     y: y,
  377.     z: 5,
  378.     a: 1,
  379.     h: 0
  380.   });
  381.  
  382.   this.e = 0.07;
  383.   this.s = true;
  384.  
  385.   this.c = new S.Color(255, 255, 255, this.p.a);
  386.  
  387.   this.t = this.clone();
  388.   this.q = [];
  389. };
  390.  
  391. S.Dot.prototype = {
  392.   clone: function () {
  393.     return new S.Point({
  394.       x: this.x,
  395.       y: this.y,
  396.       z: this.z,
  397.       a: this.a,
  398.       h: this.h
  399.     });
  400.   },
  401.  
  402.   _draw: function () {
  403.     this.c.a = this.p.a;
  404.     S.Drawing.drawCircle(this.p, this.c);
  405.   },
  406.  
  407.   _moveTowards: function (n) {
  408.     var details = this.distanceTo(n, true),
  409.         dx = details[0],
  410.         dy = details[1],
  411.         d = details[2],
  412.         e = this.e * d;
  413.  
  414.     if (this.p.h === -1) {
  415.       this.p.x = n.x;
  416.       this.p.y = n.y;
  417.       return true;
  418.     }
  419.  
  420.     if (d > 1) {
  421.       this.p.x -= ((dx / d) * e);
  422.       this.p.y -= ((dy / d) * e);
  423.     } else {
  424.       if (this.p.h > 0) {
  425.         this.p.h--;
  426.       } else {
  427.         return true;
  428.       }
  429.     }
  430.  
  431.     return false;
  432.   },
  433.  
  434.   _update: function () {
  435.     if (this._moveTowards(this.t)) {
  436.       var p = this.q.shift();
  437.  
  438.       if (p) {
  439.         this.t.x = p.x || this.p.x;
  440.         this.t.y = p.y || this.p.y;
  441.         this.t.z = p.z || this.p.z;
  442.         this.t.a = p.a || this.p.a;
  443.         this.p.h = p.h || 0;
  444.       } else {
  445.         if (this.s) {
  446.           this.p.x -= Math.sin(Math.random() * 3.142);
  447.           this.p.y -= Math.sin(Math.random() * 3.142);
  448.         } else {
  449.           this.move(new S.Point({
  450.             x: this.p.x + (Math.random() * 50) - 25,
  451.             y: this.p.y + (Math.random() * 50) - 25,
  452.           }));
  453.         }
  454.       }
  455.     }
  456.  
  457.     d = this.p.a - this.t.a;
  458.     this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
  459.     d = this.p.z - this.t.z;
  460.     this.p.z = Math.max(1, this.p.z - (d * 0.05));
  461.   },
  462.  
  463.   distanceTo: function (n, details) {
  464.     var dx = this.p.x - n.x,
  465.         dy = this.p.y - n.y,
  466.         d = Math.sqrt(dx * dx + dy * dy);
  467.  
  468.     return details ? [dx, dy, d] : d;
  469.   },
  470.  
  471.   move: function (p, avoidStatic) {
  472.     if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
  473.       this.q.push(p);
  474.     }
  475.   },
  476.  
  477.   render: function () {
  478.     this._update();
  479.     this._draw();
  480.   }
  481. }
  482.  
  483.  
  484. S.ShapeBuilder = (function () {
  485.   var gap = 13,
  486.       shapeCanvas = document.createElement('canvas'),
  487.       shapeContext = shapeCanvas.getContext('2d'),
  488.       fontSize = 500,
  489.       fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
  490.  
  491.   function fit() {
  492.     shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;
  493.     shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;
  494.     shapeContext.fillStyle = 'red';
  495.     shapeContext.textBaseline = 'middle';
  496.     shapeContext.textAlign = 'center';
  497.   }
  498.  
  499.   function processCanvas() {
  500.     var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data;
  501.         dots = [],
  502.         pixels,
  503.         x = 0,
  504.         y = 0,
  505.         fx = shapeCanvas.width,
  506.         fy = shapeCanvas.height,
  507.         w = 0,
  508.         h = 0;
  509.  
  510.     for (var p = 0; p < pixels.length; p += (4 * gap)) {
  511.       if (pixels[p + 3] > 0) {
  512.         dots.push(new S.Point({
  513.           x: x,
  514.           y: y
  515.         }));
  516.  
  517.         w = x > w ? x : w;
  518.         h = y > h ? y : h;
  519.         fx = x < fx ? x : fx;
  520.         fy = y < fy ? y : fy;
  521.       }
  522.  
  523.       x += gap;
  524.  
  525.       if (x >= shapeCanvas.width) {
  526.         x = 0;
  527.         y += gap;
  528.         p += gap * 4 * shapeCanvas.width;
  529.       }
  530.     }
  531.  
  532.     return { dots: dots, w: w + fx, h: h + fy };
  533.   }
  534.  
  535.   function setFontSize(s) {
  536.     shapeContext.font = 'bold ' + s + 'px ' + fontFamily;
  537.   }
  538.  
  539.   function isNumber(n) {
  540.     return !isNaN(parseFloat(n)) && isFinite(n);
  541.   }
  542.  
  543.   function init() {
  544.     fit();
  545.     window.addEventListener('resize', fit);
  546.   }
  547.  
  548.   // Init
  549.   init();
  550.  
  551.   return {
  552.     imageFile: function (url, callback) {
  553.       var image = new Image(),
  554.           a = S.Drawing.getArea();
  555.  
  556.       image.onload = function () {
  557.         shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  558.         shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);
  559.         callback(processCanvas());
  560.       };
  561.  
  562.       image.onerror = function () {
  563.         callback(S.ShapeBuilder.letter('What?'));
  564.       }
  565.  
  566.       image.src = url;
  567.     },
  568.  
  569.     circle: function (d) {
  570.       var r = Math.max(0, d) / 2;
  571.       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  572.       shapeContext.beginPath();
  573.       shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);
  574.       shapeContext.fill();
  575.       shapeContext.closePath();
  576.  
  577.       return processCanvas();
  578.     },
  579.  
  580.     letter: function (l) {
  581.       var s = 0;
  582.  
  583.       setFontSize(fontSize);
  584.       s = Math.min(fontSize,
  585.                   (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize,
  586.                   (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
  587.       setFontSize(s);
  588.  
  589.       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
  590.       shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);
  591.  
  592.       return processCanvas();
  593.     },
  594.  
  595.     rectangle: function (w, h) {
  596.       var dots = [],
  597.           width = gap * w,
  598.           height = gap * h;
  599.  
  600.       for (var y = 0; y < height; y += gap) {
  601.         for (var x = 0; x < width; x += gap) {
  602.           dots.push(new S.Point({
  603.             x: x,
  604.             y: y,
  605.           }));
  606.         }
  607.       }
  608.  
  609.       return { dots: dots, w: width, h: height };
  610.     }
  611.   };
  612. }());
  613.  
  614.  
  615. S.Shape = (function () {
  616.   var dots = [],
  617.       width = 0,
  618.       height = 0,
  619.       cx = 0,
  620.       cy = 0;
  621.  
  622.   function compensate() {
  623.     var a = S.Drawing.getArea();
  624.  
  625.     cx = a.w / 2 - width / 2;
  626.     cy = a.h / 2 - height / 2;
  627.   }
  628.  
  629.   return {
  630.     shuffleIdle: function () {
  631.       var a = S.Drawing.getArea();
  632.  
  633.       for (var d = 0; d < dots.length; d++) {
  634.         if (!dots[d].s) {
  635.           dots[d].move({
  636.             x: Math.random() * a.w,
  637.             y: Math.random() * a.h
  638.           });
  639.         }
  640.       }
  641.     },
  642.  
  643.     switchShape: function (n, fast) {
  644.       var size,
  645.           a = S.Drawing.getArea();
  646.  
  647.       width = n.w;
  648.       height = n.h;
  649.  
  650.       compensate();
  651.  
  652.       if (n.dots.length > dots.length) {
  653.         size = n.dots.length - dots.length;
  654.         for (var d = 1; d <= size; d++) {
  655.           dots.push(new S.Dot(a.w / 2, a.h / 2));
  656.         }
  657.       }
  658.  
  659.       var d = 0,
  660.           i = 0;
  661.  
  662.       while (n.dots.length > 0) {
  663.         i = Math.floor(Math.random() * n.dots.length);
  664.         dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);
  665.  
  666.         if (dots[d].s) {
  667.           dots[d].move(new S.Point({
  668.             z: Math.random() * 20 + 10,
  669.             a: Math.random(),
  670.             h: 18
  671.           }));
  672.         } else {
  673.           dots[d].move(new S.Point({
  674.             z: Math.random() * 5 + 5,
  675.             h: fast ? 18 : 30
  676.           }));
  677.         }
  678.  
  679.         dots[d].s = true;
  680.         dots[d].move(new S.Point({
  681.           x: n.dots[i].x + cx,
  682.           y: n.dots[i].y + cy,
  683.           a: 1,
  684.           z: 5,
  685.           h: 0
  686.         }));
  687.  
  688.         n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
  689.         d++;
  690.       }
  691.  
  692.       for (var i = d; i < dots.length; i++) {
  693.         if (dots[i].s) {
  694.           dots[i].move(new S.Point({
  695.             z: Math.random() * 20 + 10,
  696.             a: Math.random(),
  697.             h: 20
  698.           }));
  699.  
  700.           dots[i].s = false;
  701.           dots[i].e = 0.04;
  702.           dots[i].move(new S.Point({
  703.             x: Math.random() * a.w,
  704.             y: Math.random() * a.h,
  705.             a: 0.3, //.4
  706.             z: Math.random() * 4,
  707.             h: 0
  708.           }));
  709.         }
  710.       }
  711.     },
  712.  
  713.     render: function () {
  714.       for (var d = 0; d < dots.length; d++) {
  715.         dots[d].render();
  716.       }
  717.     }
  718.   }
  719. }());
  720.  
  721.  
  722. S.init();

微信公众号主页回复“2023新年烟花2”即可获取

第三款

视频链接处获取

Html5+js实现烟花效果

当然在CSDN也是可以下载的

链接：(三款)Html5+Css+JavaScript实现2023年跨年代码烟花设计.zip-Javascript文档类资源-CSDN下载

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/85264
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号