在桌面新建txt文件，复制以下代码，然后重命名文件为你的文件.html，然后用浏览器打开该文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>烟花动画</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
cursor: pointer;
}
canvas {
display: block;
}
.instructions {
position: absolute;
color: white;
font-family: Arial, sans-serif;
text-align: center;
pointer-events: none;
user-select: none;
}
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
<div class="instructions">点击屏幕任意位置发射烟花</div>
<script>
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');
// 设置画布大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 烟花粒子数组
let particles = [];
// 鼠标点击位置
let mouseX = canvas.width / 2;
let mouseY = canvas.height / 2;
// 监听鼠标点击事件
canvas.addEventListener('click', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
createFirework(mouseX, mouseY);
});
// 创建烟花
function createFirework(x, y) {
const particleCount = 150;
const angleIncrement = (Math.PI * 2) / particleCount;
for (let i = 0; i < particleCount; i++) {
const angle = angleIncrement * i;
const speed = Math.random() * 5 + 2;
const velocity = {
x: Math.cos(angle) * speed,
y: Math.sin(angle) * speed
};
particles.push({
x: x,
y: y,
velocity: velocity,
radius: Math.random() * 2 + 1,
color: `hsl(${Math.random() * 360}, 100%, 50%)`,
alpha: 1,
life: 100 + Math.random() * 50
});
}
}
// 更新粒子
function updateParticles() {
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
p.x += p.velocity.x;
p.y += p.velocity.y;
p.velocity.y += 0.05; // 重力
p.life--;
p.alpha = p.life / 100;
if (p.life <= 0) {
particles.splice(i, 1);
i--;
}
}
}
// 绘制粒子
function drawParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const p of particles) {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = p.color;
ctx.globalAlpha = p.alpha;
ctx.fill();
}
ctx.globalAlpha = 1;
}
// 动画循环
function animate() {
updateParticles();
drawParticles();
requestAnimationFrame(animate);
}
// 随机自动发射烟花
function autoFire() {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height / 2;
createFirework(x, y);
setTimeout(autoFire, Math.random() * 1000 + 500);
}
// 开始动画和自动发射
animate();
autoFire();
// 窗口大小调整时重置画布大小
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
