◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
页面烟花效果代码
摘要：
yanhua.js 七彩效果/** * 烟花特效优化版 2KK8.com 2026-02-26 * 使用方法，页面插入: <script src="yanhua.js&quo...
总字数：45941yanhua.js 七彩效果
/**
* 烟花特效优化版 2KK8.com 2026-02-26
* 使用方法，页面插入: <script src="yanhua.js"></script>
*/
(function() {
// requestAnimationFrame 兼容处理
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// 配置
var fireworks = [];
var particles = [];
var hue = 120;
var limiterTotal = 5;
var limiterTick = 0;
var timerTotal = 200; // 增加发射间隔，变慢
var timerTick = 0;
var mousedown = false;
var mx, my;
// 辅助函数
function random(min, max) {
return Math.random() * (max - min) + min;
}
function calculateDistance(p1x, p1y, p2x, p2y) {
var xDistance = p1x - p2x;
var yDistance = p1y - p2y;
return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
}
// 烟花类
function Firework(sx, sy, tx, ty) {
this.x = sx;
this.y = sy;
this.sx = sx;
this.sy = sy;
this.tx = tx;
this.ty = ty;
this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
this.distanceTraveled = 0;
this.coordinates = [];
this.coordinateCount = 3;
while (this.coordinateCount--) {
this.coordinates.push([this.x, this.y]);
}
this.angle = Math.atan2(ty - sy, tx - sx);
this.speed = 0.5; // 降低初始速度，让升空更慢
this.acceleration = 1.002; // 降低加速度，使升空过程更缓慢
this.brightness = random(50, 70);
this.targetRadius = 1;
}
Firework.prototype.update = function(index) {
this.coordinates.pop();
this.coordinates.unshift([this.x, this.y]);
if (this.targetRadius < 8) {
this.targetRadius += 0.3;
} else {
this.targetRadius = 1;
}
this.speed *= this.acceleration;
var vx = Math.cos(this.angle) * this.speed;
var vy = Math.sin(this.angle) * this.speed;
this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);
if (this.distanceTraveled >= this.distanceToTarget) {
createParticles(this.tx, this.ty);
fireworks.splice(index, 1);
} else {
this.x += vx;
this.y += vy;
}
}
Firework.prototype.draw = function(ctx) {
ctx.beginPath();
ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
ctx.lineTo(this.x, this.y);
ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
ctx.stroke();
}
// 粒子类
function Particle(x, y) {
this.x = x;
this.y = y;
this.coordinates = [];
this.coordinateCount = 5;
while (this.coordinateCount--) {
this.coordinates.push([this.x, this.y]);
}
this.angle = random(0, Math.PI * 2);
this.speed = random(1, 20); // 增加速度范围，使爆炸范围更大
this.friction = 0.95;
this.gravity = 1;
// 粒子颜色完全随机，不再依赖全局 hue
this.hue = random(0, 360);
this.brightness = random(50, 80);
this.alpha = 1;
this.decay = random(0.015, 0.03);
}
Particle.prototype.update = function(index) {
this.coordinates.pop();
this.coordinates.unshift([this.x, this.y]);
this.speed *= this.friction;
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed + this.gravity;
this.alpha -= this.decay;
if (this.alpha <= this.decay) {
particles.splice(index, 1);
}
}
Particle.prototype.draw = function(ctx) {
ctx.beginPath();
ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
ctx.lineTo(this.x, this.y);
ctx.lineWidth = 3; // 增加线宽，让粒子看起来更大
ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
ctx.stroke();
ctx.lineWidth = 1; // 绘制完后还原线宽
}
function createParticles(x, y) {
var particleCount = 100; // 增加粒子数量，使爆炸效果更饱满
while (particleCount--) {
particles.push(new Particle(x, y));
}
}
// 初始化函数
function init() {
var canvas = document.createElement("canvas");
canvas.id = "fireworks_canvas";
canvas.style.position = "fixed";
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.style.zIndex = "99999";
canvas.style.pointerEvents = "none"; // 点击穿透
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
canvas.width = windowWidth;
canvas.height = windowHeight;
function loop() {
requestAnimationFrame(loop);
// 循环颜色，用于烟花上升阶段
hue += 0.5;
// 创建拖尾效果
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, windowWidth, windowHeight);
ctx.globalCompositeOperation = 'lighter';
var i = fireworks.length;
while (i--) {
fireworks[i].draw(ctx);
fireworks[i].update(i);
}
var i = particles.length;
while (i--) {
particles[i].draw(ctx);
particles[i].update(i);
}
// 自动发射逻辑修改
if (timerTick >= timerTotal) {
if (!mousedown) {
// 每次随机发射 1 到 5 个烟花
var count = Math.floor(random(1, 6));
for(var k=0; k<count; k++) {
// 垂直发射：起点x和终点x一致
var launchX = random(0, windowWidth);
fireworks.push(new Firework(launchX, windowHeight, launchX, random(0, windowHeight / 2)));
}
timerTick = 0;
}
} else {
timerTick++;
}
// 限制手动发射
if (limiterTick >= limiterTotal) {
if (mousedown) {
fireworks.push(new Firework(windowWidth / 2, windowHeight, mx, my));
limiterTick = 0;
}
} else {
limiterTick++;
}
}
window.addEventListener('resize', function() {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
canvas.width = windowWidth;
canvas.height = windowHeight;
});
// 循环
loop();
}
// 仅在大屏幕上启动
if (window.innerWidth > 768) {
if (document.readyState === 'complete') {
init();
} else {
window.addEventListener('load', init);
}
}
})();yanhua-2.js 虚幻化效果
/**
* 烟花特效优化版
* 使用方法，页面插入: <script src="yanhua-2.js"></script>
*/
(function() {
// requestAnimationFrame 兼容处理
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// 配置
var fireworks = [];
var particles = [];
var hue = 120;
var limiterTotal = 5;
var limiterTick = 0;
var timerTotal = 200;
var timerTick = 0;
var mousedown = false;
var mx, my;
// 颜色配置
var colorSchemes = [
{ h: 0, s: 100, l: 70 }, // 红色系
{ h: 30, s: 100, l: 70 }, // 橙色系
{ h: 60, s: 100, l: 70 }, // 黄色系
{ h: 120, s: 100, l: 70 }, // 绿色系
{ h: 180, s: 100, l: 70 }, // 青色系
{ h: 240, s: 100, l: 70 }, // 蓝色系
{ h: 270, s: 100, l: 70 }, // 紫色系
{ h: 300, s: 100, l: 70 } // 品红系
];
// 辅助函数
function random(min, max) {
return Math.random() * (max - min) + min;
}
function calculateDistance(p1x, p1y, p2x, p2y) {
var xDistance = p1x - p2x;
var yDistance = p1y - p2y;
return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
}
// 获取绚丽的颜色
function getVibrantColor() {
var scheme = colorSchemes[Math.floor(random(0, colorSchemes.length))];
var brightness = random(60, 90);
return {
h: scheme.h + random(-15, 15), // 增加色彩变化
s: 100,
l: brightness
};
}
// 获取粒子颜色（更明亮的变体）
function getParticleColor(baseHue) {
return {
h: baseHue + random(-20, 20), // 更大的色相变化
s: random(90, 100),
l: random(70, 95) // 更明亮
};
}
// 烟花类
function Firework(sx, sy, tx, ty) {
this.x = sx;
this.y = sy;
this.sx = sx;
this.sy = sy;
this.tx = tx;
this.ty = ty;
this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
this.distanceTraveled = 0;
this.coordinates = [];
this.coordinateCount = 3;
while (this.coordinateCount--) {
this.coordinates.push([this.x, this.y]);
}
this.angle = Math.atan2(ty - sy, tx - sx);
this.speed = 0.5;
this.acceleration = 1.002;
this.color = getVibrantColor(); // 使用更鲜艳的颜色
this.targetRadius = 1;
this.lineWidth = random(2, 4); // 增加线宽变化
}
Firework.prototype.update = function(index) {
this.coordinates.pop();
this.coordinates.unshift([this.x, this.y]);
if (this.targetRadius < 8) {
this.targetRadius += 0.3;
} else {
this.targetRadius = 1;
}
this.speed *= this.acceleration;
var vx = Math.cos(this.angle) * this.speed;
var vy = Math.sin(this.angle) * this.speed;
this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);
if (this.distanceTraveled >= this.distanceToTarget) {
createParticles(this.tx, this.ty, this.color.h);
fireworks.splice(index, 1);
} else {
this.x += vx;
this.y += vy;
}
}
Firework.prototype.draw = function(ctx) {
ctx.beginPath();
ctx.moveTo(this.coordinates[this.coordinates.length - 1][0],
this.coordinates[this.coordinates.length - 1][1]);
ctx.lineTo(this.x, this.y);
ctx.lineWidth = this.lineWidth;
// 使用更丰富的颜色渐变
var gradient = ctx.createLinearGradient(
this.coordinates[this.coordinates.length - 1][0],
this.coordinates[this.coordinates.length - 1][1],
this.x,
this.y
);
gradient.addColorStop(0, `hsla(${this.color.h}, ${this.color.s}%, ${this.color.l}%, 0.8)`);
gradient.addColorStop(1, `hsla(${this.color.h + 30}, ${this.color.s}%, ${this.color.l + 10}%, 0.4)`);
ctx.strokeStyle = gradient;
ctx.stroke();
}
// 粒子类
function Particle(x, y, baseHue) {
this.x = x;
this.y = y;
this.coordinates = [];
this.coordinateCount = 5;
while (this.coordinateCount--) {
this.coordinates.push([this.x, this.y]);
}
this.angle = random(0, Math.PI * 2);
this.speed = random(1, 24); // 稍微增加速度范围 1, 12
this.friction = 0.95;
this.gravity = 1;
this.color = getParticleColor(baseHue); // 基于烟花主色调
this.alpha = 1;
this.decay = random(0.01, 0.025); // 调整衰减速度
this.lineWidth = random(2, 5); // 增加粒子线宽
this.sparkle = Math.random() > 0.7; // 30%的粒子有闪烁效果
this.sparkleTimer = 0;
}
Particle.prototype.update = function(index) {
this.coordinates.pop();
this.coordinates.unshift([this.x, this.y]);
this.speed *= this.friction;
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed + this.gravity;
this.alpha -= this.decay;
// 闪烁效果
if (this.sparkle) {
this.sparkleTimer++;
if (this.sparkleTimer > 5) {
this.color.l = Math.min(100, this.color.l + random(10, 20));
this.sparkleTimer = 0;
}
}
if (this.alpha <= this.decay) {
particles.splice(index, 1);
}
}
Particle.prototype.draw = function(ctx) {
ctx.beginPath();
ctx.moveTo(this.coordinates[this.coordinates.length - 1][0],
this.coordinates[this.coordinates.length - 1][1]);
ctx.lineTo(this.x, this.y);
ctx.lineWidth = this.lineWidth;
// 创建发光效果
ctx.shadowBlur = 15;
ctx.shadowColor = `hsla(${this.color.h}, ${this.color.s}%, ${this.color.l}%, 0.8)`;
// 粒子颜色渐变
var gradient = ctx.createLinearGradient(
this.coordinates[this.coordinates.length - 1][0],
this.coordinates[this.coordinates.length - 1][1],
this.x,
this.y
);
gradient.addColorStop(0, `hsla(${this.color.h}, ${this.color.s}%, ${this.color.l}%, ${this.alpha})`);
gradient.addColorStop(1, `hsla(${this.color.h + 20}, ${this.color.s - 20}%, ${this.color.l + 5}%, ${this.alpha * 0.5})`);
ctx.strokeStyle = gradient;
ctx.stroke();
// 重置阴影
ctx.shadowBlur = 0;
}
function createParticles(x, y, baseHue) {
var particleCount = Math.floor(random(40, 140)); // 增加粒子数量范围 40,70
while (particleCount--) {
particles.push(new Particle(x, y, baseHue));
}
// 添加特殊效果粒子
var specialParticleCount = Math.floor(random(5, 15));
while (specialParticleCount--) {
var specialParticle = new Particle(x, y, baseHue);
specialParticle.speed = random(15, 25); // 高速粒子
specialParticle.lineWidth = random(1, 2);
specialParticle.color.l = random(85, 100); // 更亮
specialParticle.alpha = 0.8;
particles.push(specialParticle);
}
}
// 初始化函数
function init() {
var canvas = document.createElement("canvas");
canvas.id = "fireworks_canvas";
canvas.style.position = "fixed";
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.style.zIndex = "99999";
canvas.style.pointerEvents = "none";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
canvas.width = windowWidth;
canvas.height = windowHeight;
// 优化画布渲染质量
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
function loop() {
requestAnimationFrame(loop);
// 使用更平滑的颜色循环
hue = (hue + 0.3) % 360;
// 创建更自然的拖尾效果
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; // 降低透明度，让轨迹更持久
ctx.fillRect(0, 0, windowWidth, windowHeight);
ctx.globalCompositeOperation = 'lighter';
// 绘制烟花
var i = fireworks.length;
while (i--) {
fireworks[i].draw(ctx);
fireworks[i].update(i);
}
// 绘制粒子
var i = particles.length;
while (i--) {
particles[i].draw(ctx);
particles[i].update(i);
}
// 自动发射逻辑
if (timerTick >= timerTotal) {
if (!mousedown) {
// 每次发射时选择主色调
var mainHue = Math.floor(random(0, 360));
var count = Math.floor(random(1, 6));
for(var k=0; k<count; k++) {
var launchX = random(0, windowWidth);
var firework = new Firework(launchX, windowHeight, launchX, random(0, windowHeight / 2));
firework.color.h = (mainHue + k * 30) % 360; // 创建色彩变化
fireworks.push(firework);
}
timerTick = 0;
}
} else {
timerTick++;
}
// 限制手动发射
if (limiterTick >= limiterTotal) {
if (mousedown) {
fireworks.push(new Firework(windowWidth / 2, windowHeight, mx, my));
limiterTick = 0;
}
} else {
limiterTick++;
}
}
window.addEventListener('resize', function() {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
canvas.width = windowWidth;
canvas.height = windowHeight;
});
// 开始循环
loop();
}
// 仅在大屏幕上启动
if (window.innerWidth > 768) {
if (document.readyState === 'complete') {
init();
} else {
window.addEventListener('load', init);
}
}
})();本站优化版，请随意传播。
内页底部广告（PC版），后台可以自由更改
9KKD.com
9KKD.com
这里的内容可以随意更改，在后台-主题配置中设置。
百度推荐获取地址：http://tuijian.baidu.com/，百度推荐可能会有一些未知的问题，使用中有任何问题请直接联系百度官方客服！