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