要在HTML中实现代码烟花特效，需要使用JavaScript和Canvas。以下是一个简单的代码烟花特效示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Code Fireworks</title>
<style>
canvas {
background-color: black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 获取canvas元素和上下文对象
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义一个烟花粒子类
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.radius = Math.random() * 2 + 1;
this.speed = {
x: Math.random() * 3 - 1.5,
y: Math.random() * 3 - 1.5
};
this.gravity = 0.1;
this.opacity = 1;
this.decrease = Math.random() * 0.01 + 0.005;
}
// 更新粒子位置和状态
update() {
this.speed.y += this.gravity;
this.x += this.speed.x;
this.y += this.speed.y;
this.opacity -= this.decrease;
this.radius -= this.decrease * 5;
// 绘制粒子
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${this.color}, ${this.opacity})`;
ctx.fill();
ctx.closePath();
}
}
// 创建一个烟花函数
function createFirework() {
const x = Math.random() * canvas.width;
const y = canvas.height;
const color = `${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}`;
// 创建烟花粒子
const firework = new Particle(x, y, color);
// 创建烟花爆炸粒子
const particles = [];
const count = Math.random() * 50 + 50;
for (let i = 0; i < count; i++) {
particles.push(new Particle(x, y, color));
}
// 动画循环更新烟花粒子
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新烟花粒子和爆炸粒子
firework.update();
particles.forEach((particle, index) => {
if (particle.opacity <= 0) {
particles.splice(index, 1);
} else {
particle.update();
}
});
// 如果爆炸粒子数组为空，则停止动画循环
if (particles.length === 0) {
cancelAnimationFrame(animationId);
} else {
animationId = requestAnimationFrame(animate);
}
}
let animationId = requestAnimationFrame(animate);
}
// 定时器创建一个新的烟花
setInterval(createFirework, 1000);</script>
</body>
</html>
在上面的代码中，我们首先创建了一个Canvas元素，并设置了它的大小和背景颜色。然后我们定义了一个烟花粒子类，并在其中实现了粒子的更新和绘制功能。接着我们创建了一个烟花函数，在其中随机生成一个初始位置和颜色，并创建一个烟花粒子和爆炸粒子数组。在动画循环中，我们更新并绘制烟花粒子和爆炸粒子，并根据爆炸粒子数组是否为空来决定是否停止动画循环。最后，我们使用定时器来每隔一段时间创建一个新的烟花。
请注意，这只是一个简单的代码烟花特效示例，你可以根据自己的需求和创意进行修改和扩展。
猜你喜欢：c++语言写出动态烟花代码
评论