帮我写一段烟花的HTML5
时间: 2024-05-12 07:05:08 浏览: 8
<!DOCTYPE html>
<html>
<head>
<title>烟花</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
<script>
// 获取画布和绘图环境
var canvas = document.getElementById("fireworks");
var ctx = canvas.getContext("2d");
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 烟花数组
var fireworks = [];
// 烟花构造函数
function Firework() {
this.x = Math.random() * canvas.width; // 烟花的x坐标
this.y = canvas.height; // 烟花的y坐标
this.vx = Math.random() * 4 - 2; // x轴速度
this.vy = Math.random() * -10 - 10; // y轴速度
this.gravity = 0.2; // 重力加速度
this.color = "hsl(" + Math.floor(Math.random() * 360) + ", 100%, 50%)"; // 颜色
this.exploded = false; // 是否已经爆炸
this.particles = []; // 烟花爆炸后产生的粒子数组
}
// 更新烟花的位置
Firework.prototype.update = function() {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
// 当烟花到达顶部时,触发爆炸效果
if (this.vy >= 0 && !this.exploded) {
this.explode();
}
// 绘制烟花
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
ctx.fill();
};
// 烟花爆炸效果
Firework.prototype.explode = function() {
this.exploded = true;
// 产生30个粒子
for (var i = 0; i < 30; i++) {
var particle = new Particle(this.x, this.y, this.color);
this.particles.push(particle);
}
};
// 粒子构造函数
function Particle(x, y, color) {
this.x = x;
this.y = y;
this.vx = Math.random() * 4 - 2;
this.vy = Math.random() * 4 - 2;
this.gravity = 0.1;
this.color = color;
this.life = 100; // 粒子寿命
}
// 更新粒子的位置
Particle.prototype.update = function() {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.life--;
// 绘制粒子
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fill();
};
// 循环绘制烟花和粒子
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].update();
// 绘制烟花爆炸后产生的粒子
for (var j = 0; j < fireworks[i].particles.length; j++) {
fireworks[i].particles[j].update();
// 删除寿命已经结束的粒子
if (fireworks[i].particles[j].life <= 0) {
fireworks[i].particles.splice(j, 1);
}
}
// 删除已经消失的烟花
if (fireworks[i].vy >= 0 && fireworks[i].particles.length === 0) {
fireworks.splice(i, 1);
}
}
// 每隔1秒产生一个新的烟花
if (Math.random() < 0.03) {
var firework = new Firework();
fireworks.push(firework);
}
requestAnimationFrame(loop);
}
// 开始绘制烟花
loop();
</script>
</body>
</html>
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)