JS烟花效果烟花字体页面实现（附带源码）

原创已于 2023-01-12 10:56:28 修改 · 1.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-01-02 14:38:27 首次发布

前端专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何使用HTML、CSS和JavaScript，结合jQuery的fireworks.js插件，创建一个浪漫的跨年倒计时，当时间到点时，文字会以烟花绽放的效果展现。

相信大家过年都想给喜欢的人弄一个浪漫的惊喜

html+css+js纯前端实现，跨年倒计时，点击烟花字完整体，文件放在最下面

烟花效果是用了jquery.fireworks.js 现成写好的js插件

创建烟花效果字体主要函数

function createFireworks(x, y, text = "") {

       var hue = Math.random() * 360;
       var hueVariance = 30;

       function setupColors(p) {
           p.hue = Math.floor(Math.random() * ((hue + hueVariance) - (hue - hueVariance))) + (hue - hueVariance);
           p.brightness = Math.floor(Math.random() * 21) + 50;
           p.alpha = (Math.floor(Math.random() * 61) + 40) / 100;
       }

       if (text != "") {

           var gap = 6;
           var fontSize = 120;

           textctx.font = fontSize + "px Verdana";
           textctx.fillStyle = "#ffffff";

           var textWidth = textctx.measureText(text).width;
           var textHeight = fontSize;

           textctx.fillText(text, 0, textHeight);
           var imgData = textctx.getImageData(0, 0, textWidth, textHeight * 1.2);

           textctx.fillStyle = "#000000";
           textctx.fillRect(0, 0, textCanvas.width, textCanvas.height);

           for (var h = 0; h < textHeight * 1.2; h += gap) {
               for (var w = 0; w < textWidth; w += gap) {
                   var position = (textWidth * h + w) * 4;
                   var r = imgData.data[position], g = imgData.data[position + 1], b = imgData.data[position + 2], a = imgData.data[position + 3];

                   if (r + g + b == 0) continue;

                   var p = {};

                   p.x = x;
                   p.y = y;

                   p.fx = x + w - textWidth / 2;
                   p.fy = y + h - textHeight / 2;

                   p.size = Math.floor(Math.random() * 2) + 1;
                   p.speed = 1;
                   setupColors(p);

                   particles.push(p);
               }
           }
       } else {
           var count = 100;
           for (var i = 0; i < count; i++) {
               //角度
               var angle = 360 / count * i;
               //弧度
               var radians = angle * Math.PI / 180;

               var p = {};

               p.x = x;
               p.y = y;
               p.radians = radians;

               //大小
               p.size = Math.random()*2+1;

               //速度
               p.speed = Math.random()*5+.4;

               //半径
               p.radius = Math.random()*81+50;

               p.fx = x + Math.cos(radians) * p.radius;
               p.fy = y + Math.sin(radians) * p.radius;

               setupColors(p);

               particles.push(p);
           }
       }
   }