◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
页面烟花效果代码
摘要：
yanhua.js 七彩效果/** * 烟花特效优化版 2KK8.com 2026-02-26 * 使用方法，页面插入: <script src="yanhua.js&quo...
总字数：34218yanhua.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 虚幻化效果<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>烟花特效 - 兼容所有设备</title>
<style>
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: black;
overflow: hidden;
width: 100vw;
height: 100vh;
}
canvas {
display: block;
}
.info {
position: fixed;
top: 20px;
left: 20px;
color: white;
background: rgba(0,0,0,0.5);
padding: 10px;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
z-index: 10000;
}
</style>
</head>
<body>
<div>🎆 触摸屏幕观看烟花</div>
<canvas id="fireworks"></canvas>
<script>
(function() {
'use strict';
console.log('烟花特效启动 - 极简版本');
// 获取canvas和context
var canvas = document.getElementById('fireworks');
var ctx = canvas.getContext('2d');
// 设置canvas尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var width = canvas.width;
var height = canvas.height;
// 极简配置
var fireworks = []; // 最大3个烟花
var particles = []; // 最大20个粒子
var lastTime = 0;
var frameCount = 0;
var fps = 0;
// 简单颜色数组
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
// 获取随机颜色
function getRandomColor() {
return colors[Math.floor(Math.random() * colors.length)];
}
// 创建烟花（极简）
function createFirework() {
if (fireworks.length >= 2) return; // 最多2个同时存在
var x = 100 + Math.random() * (width - 200);
fireworks.push({
x: x,
y: height,
targetY: 100 + Math.random() * 200,
speed: 2,
color: getRandomColor(),
state: 'rising'
});
}
// 创建爆炸粒子（极少数量）
function createExplosion(x, y, color) {
for (var i = 0; i < 6; i++) { // 只有6个粒子
particles.push({
x: x,
y: y,
vx: (Math.random() - 0.5) * 3,
vy: (Math.random() - 0.5) * 3 - 1,
color: color,
life: 1
});
}
}
// 更新烟花
function updateFireworks() {
for (var i = fireworks.length - 1; i >= 0; i--) {
var f = fireworks[i];
f.y -= f.speed;
f.speed *= 0.99;
if (f.y <= f.targetY) {
createExplosion(f.x, f.y, f.color);
fireworks.splice(i, 1);
}
}
}
// 更新粒子
function updateParticles() {
for (var i = particles.length - 1; i >= 0; i--) {
var p = particles[i];
p.x += p.vx;
p.y += p.vy;
p.vy += 0.05;
p.life -= 0.02;
if (p.life <= 0) {
particles.splice(i, 1);
}
}
}
// 绘制
function draw() {
// 完全清除画布
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, width, height);
// 绘制烟花
for (var i = 0; i < fireworks.length; i++) {
var f = fireworks[i];
ctx.fillStyle = f.color;
ctx.beginPath();
ctx.arc(f.x, f.y, 4, 0, Math.PI * 2);
ctx.fill();
// 简单轨迹
ctx.beginPath();
ctx.moveTo(f.x, height);
ctx.lineTo(f.x, f.y);
ctx.strokeStyle = f.color;
ctx.lineWidth = 1;
ctx.stroke();
}
// 绘制粒子
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
ctx.globalAlpha = p.life;
ctx.fillStyle = p.color;
ctx.beginPath();
ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1;
}
// 主循环
function animate(timestamp) {
// 控制帧率
frameCount++;
if (timestamp - lastTime >= 1000) {
fps = frameCount;
frameCount = 0;
lastTime = timestamp;
// 自动添加烟花
if (Math.random() < 0.3 && fireworks.length < 2) {
createFirework();
}
}
// 更新
updateFireworks();
updateParticles();
// 绘制
draw();
// 继续循环
requestAnimationFrame(animate);
}
// 触摸事件
canvas.addEventListener('touchstart', function(e) {
e.preventDefault();
if (fireworks.length < 2) {
createFirework();
}
});
// 鼠标事件
canvas.addEventListener('mousedown', function(e) {
if (fireworks.length < 2) {
createFirework();
}
});
// 窗口大小变化
window.addEventListener('resize', function() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
fireworks = [];
particles = [];
});
// 立即显示一个烟花
setTimeout(createFirework, 500);
// 启动动画
requestAnimationFrame(animate);
console.log('烟花特效运行中');
})();
</script>
</body>
</html>
本站优化版，请随意传播。
内页底部广告（PC版），后台可以自由更改
9KKD.com
9KKD.com
这里的内容可以随意更改，在后台-主题配置中设置。
百度推荐获取地址：http://tuijian.baidu.com/，百度推荐可能会有一些未知的问题，使用中有任何问题请直接联系百度官方客服！