相信大家过年都想给喜欢的人弄一个浪漫的惊喜
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