以下是html代码,直接辅助文本放入文本编辑器中,后缀改为 .html 使用浏览器打开可直接播放
五彩缤纷的烟花效果。如图展示
* { margin: 0; padding: 0; }
canvas { display: block; background: #001122; }
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');
// 初始化画布尺寸
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 星空背景
const stars = [];
function createStars() {
for (let i = 0; i < 200; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height * 0.6,
size: Math.random() * 1.5,
alpha: Math.random() * 0.5 + 0.5
});
}
}
function drawStars() {
stars.forEach(star => {
ctx.beginPath();
ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha})`;
ctx.fill();
});
}
// 月亮绘制
function drawMoon() {
ctx.beginPath();
ctx.arc(canvas.width - 100, 100, 40, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 200, 0.9)';
ctx.fill();
}
// 烟花发射器类
class Firework {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = canvas.height;
this.targetX = canvas.width/2 + (Math.random() - 0.5) * canvas.width/4;
this.targetY = canvas.height/2 + (Math.random() - 0.5) * canvas.height/4;
this.speed = 8 + Math.random() * 4;
this.angle = Math.atan2(this.targetY - this.y, this.targetX - this.x);
this.color = `hsl(${Math.random()*60 + 20}, 100%, 60%)`;
this.trail = [];
this.exploded = false;
}
update() {
if (this.exploded) return false;
this.trail.push({ x: this.x, y: this.y, alpha: 1 });
if (this.trail.length > 20) this.trail.shift();
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
if (Math.abs(this.x - this.targetX) < 10 && Math.abs(this.y - this.targetY) < 10) {
this.explode();
return false;
}
return true;
}
explode() {
createExplosion(this.x, this.y, 0);
this.exploded = true;
}
draw() {
// 绘制轨迹
this.trail.forEach((pos, index) => {
ctx.beginPath();
ctx.arc(pos.x, pos.y, 2 * (index/this.trail.length), 0, Math.PI*2);
ctx.fillStyle = `rgba(255, 200, 50, ${pos.alpha * 0.5})`;
ctx.fill();
});
// 绘制主体
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI*2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 爆炸粒子类
class Particle {
constructor(x, y, level) {
this.x = x;
this.y = y;
this.level = level;
this.color = this.getColor();
this.angle = Math.random() * Math.PI * 2;
this.velocity = this.getSpeed();
this.gravity = 0.2;
this.friction = 0.97;
this.alpha = 1;
this.decay = this.getDecay();
this.hasTriggered = false;
}
getColor() {
const colors = ['#FFFFFF', '#FFFF00', '#FF4500'];
return colors[this.level];
}
getSpeed() {
const speeds = [12, 6, 3];
return Math.random() * speeds[this.level] + speeds[this.level]/2;
}
getDecay() {
const decays = [0.02, 0.03, 0.04];
return decays[this.level];
}
update() {
this.velocity *= this.friction;
this.x += Math.cos(this.angle) * this.velocity;
this.y += Math.sin(this.angle) * this.velocity + this.gravity;
this.alpha -= this.decay;
// 触发子爆炸机制
if (this.alpha < 0.3 && !this.hasTriggered && this.level < 2) {
if (Math.random() < 0.01) {
createExplosion(this.x, this.y, this.level + 1);
this.hasTriggered = true;
}
}
return this.alpha > 0;
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, 3 - this.level, 0, Math.PI*2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
// 系统变量
const fireworks = [];
const particles = [];
function createExplosion(x, y, level) {
const count = [100, 30, 15][level];
for (let i = 0; i < count; i++) {
particles.push(new Particle(x, y, level));
}
}
// 动画循环
function animate() {
ctx.fillStyle = 'rgba(0, 20, 40, 0.08)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制背景
drawMoon();
drawStars();
// 发射新烟花
if (Math.random() < 0.03) {
fireworks.push(new Firework());
}
// 更新烟花
fireworks.forEach((fw, index) => {
if (!fw.update()) {
fireworks.splice(index, 1);
} else {
fw.draw();
}
});
// 更新粒子
particles.forEach((p, index) => {
if (!p.update()) {
particles.splice(index, 1);
} else {
p.draw();
}
});
requestAnimationFrame(animate);
}
// 初始化
createStars();
animate();