javaScript烟花代码
时间: 2023-09-23 15:07:21 浏览: 55
以下是一个简单的JavaScript烟花代码:
```html
<html>
<head>
<title>JavaScript Fireworks</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置画布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 烟花数组
var fireworks = [];
// 添加烟花
function addFirework() {
var firework = {
x: Math.random() * canvas.width,
y: canvas.height,
size: Math.random() * 10 + 5,
speed: Math.random() * 5 + 5,
color: "#" + ((1 << 24) * Math.random() | 0).toString(16),
particles: [],
};
fireworks.push(firework);
}
// 添加烟花粒子
function addParticle(x, y, color) {
var particle = {
x: x,
y: y,
size: Math.random() * 2 + 1,
speed: Math.random() * 5 + 1,
color: color,
angle: Math.random() * Math.PI * 2,
};
fireworks[fireworks.length - 1].particles.push(particle);
}
// 更新画面
function update() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 添加烟花
if (Math.random() < 0.1) {
addFirework();
}
// 更新烟花
for (var i = 0; i < fireworks.length; i++) {
var firework = fireworks[i];
// 更新烟花粒子
for (var j = 0; j < firework.particles.length; j++) {
var particle = firework.particles[j];
// 计算下一帧位置
var dx = Math.cos(particle.angle) * particle.speed;
var dy = Math.sin(particle.angle) * particle.speed;
particle.x += dx;
particle.y += dy;
// 更新角度
particle.angle += Math.random() * 0.2 - 0.1;
// 绘制粒子
ctx.beginPath();
ctx.fillStyle = particle.color;
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fill();
// 删除粒子
if (particle.size < 0.1) {
firework.particles.splice(j, 1);
j--;
}
}
// 计算下一帧位置
firework.y -= firework.speed;
// 绘制烟花
ctx.beginPath();
ctx.fillStyle = firework.color;
ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
ctx.fill();
// 添加烟花粒子
if (firework.y < canvas.height - firework.size * 10) {
for (var j = 0; j < 10; j++) {
addParticle(firework.x, firework.y, firework.color);
}
fireworks.splice(i, 1);
i--;
}
}
// 循环更新
window.requestAnimationFrame(update);
}
// 开始更新
update();
</script>
</body>
</html>
```
以上代码通过canvas绘制烟花效果。每隔一段时间会随机添加一个烟花,烟花上升到一定高度后会爆炸,同时发射出一些彩色的粒子。粒子会随着时间的推移逐渐消失。整个画面不断更新,形成烟花连续爆炸的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)