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);
            }
        }
    }

效果图片

 

 

 

链接：https://pan.baidu.com/s/1e0lMKdkuBcjTW0Wo2o2kSg 
提取码：azyz