用 javascript 实现烟花代码
时间: 2024-06-13 15:07:17 浏览: 10
好的,以下是一个简单的用 JavaScript 实现烟花效果的代码:
```javascript
// 获取画布元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 烟花数组
let fireworks = [];
// 创建烟花
function createFirework() {
// 随机生成烟花的位置和颜色
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
// 创建烟花对象
const firework = {
x,
y,
color,
particles: []
};
// 创建烟花爆炸后的粒子
for (let i = 0; i < 50; i++) {
const particle = {
x,
y,
color,
size: Math.random() * 2,
speed: {
x: Math.random() * 5 - 2.5,
y: Math.random() * 5 - 2.5
}
};
firework.particles.push(particle);
}
// 将烟花添加到数组中
fireworks.push(firework);
}
// 更新烟花状态
function updateFireworks() {
// 遍历烟花数组
for (let i = fireworks.length - 1; i >= 0; i--) {
const firework = fireworks[i];
// 更新粒子位置
for (let j = firework.particles.length - 1; j >= 0; j--) {
const particle = firework.particles[j];
particle.x += particle.speed.x;
particle.y += particle.speed.y;
}
// 移除已经消失的粒子
firework.particles = firework.particles.filter(particle => particle.size > 0.1);
// 如果烟花已经消失,则从数组中移除
if (firework.particles.length === 0) {
fireworks.splice(i, 1);
}
}
}
// 绘制烟花
function drawFireworks() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制烟花粒子
fireworks.forEach(firework => {
firework.particles.forEach(particle => {
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.fill();
});
});
}
// 循环执行动画
function loop() {
// 随机生成烟花
if (Math.random() < 0.05) {
createFirework();
}
// 更新烟花状态
updateFireworks();
// 绘制烟花
drawFireworks();
// 循环执行动画
requestAnimationFrame(loop);
}
// 开始执行动画
loop();
```
你可以将上面的代码复制到一个 HTML 文件中,并在浏览器中打开该文件,就可以看到烟花效果了。如果你想了解更多关于 JavaScript 实现烟花的方法,可以搜索一下“JavaScript fireworks”。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)