最近在学习HTML5的Canvas，觉得这是一个非常强大且有趣的功能，所以决定尝试一下如何使用Canvas来实现烟花效果。在这篇博客中，我将向大家分享我的经验和代码，希望能帮助到其他对Canvas感兴趣的开发者。
准备工作
在开始之前，我们需要做一些准备工作。首先，我们需要一个HTML文件来放置Canvas元素：
<!DOCTYPE html>
<html>
<head>
<title>Canvas实现烟花效果</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #111;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="fireworks"></canvas>
<script src="fireworks.js"></script>
</body>
</html>
上面的代码中，我们定义了一个带有id为fireworks的Canvas元素，并且在页面底部引入了一个名为fireworks.js的脚本文件用于实现烟花效果。
实现烟花效果
接下来，我们编写fireworks.js文件来实现烟花效果。首先，我们需要获取到Canvas元素和绘图上下文，并设置Canvas的宽度和高度：
var canvas = document.getElementById("fireworks");
var ctx = canvas.getContext("2d");
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;
接着，我们定义一个Particle类，用于表示一个粒子。每个粒子都有位置、速度和加速度属性，并且可以更新自己的状态和绘制自己在Canvas上。
function Particle() {
this.x = width / 2;
this.y = height;
this.vx = Math.random() * 2 - 1;
this.vy = Math.random() * -5 - 2;
this.gravity = 0.1;
}
Particle.prototype.update = function() {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
}
Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
}
我们还需要定义一个Firework类，用于表示一个烟花。每个烟花由一个在Canvas上的起点开始，并且会随着时间和重力的影响而以某个速度飞行，最后爆炸成一群粒子。
function Firework() {
this.x = Math.random() * width;
this.y = height;
this.vx = Math.random() * 2 - 1;
this.vy = Math.random() * -5 - 2;
this.exploded = false;
this.particles = [];
}
Firework.prototype.update = function() {
if (!this.exploded) {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
if (this.vy >= 0) {
this.exploded = true;
this.explode();
}
} else {
for (var i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].y >= height) {
this.particles.splice(i, 1);
}
}
if (this.particles.length === 0) {
fireworks.splice(fireworks.indexOf(this), 1);
}
}
}
Firework.prototype.draw = function() {
if (!this.exploded) {
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fillStyle = "#fff";
ctx.fill();
} else {
for (var i = 0, len = this.particles.length; i < len; i++) {
this.particles[i].draw();
}
}
}
Firework.prototype.explode = function() {
for (var i = 0; i < 100; i++) {
var particle = new Particle();
this.particles.push(particle);
}
}
最后，在fireworks.js文件底部，我们需要创建一个空数组来存储所有的烟花，并且使用requestAnimationFrame来实现动画的循环：
var fireworks = [];
function loop() {
ctx.clearRect(0, 0, width, height);
if (Math.random() < 0.03) {
fireworks.push(new Firework());
}
for (var i = fireworks.length - 1; i >= 0; i--) {
fireworks[i].update();
fireworks[i].draw();
}
requestAnimationFrame(loop);
}
loop();
运行效果
现在，我们打开HTML文件，就可以看到一个实时的烟花效果了。每次刷新页面都会产生不同的烟花爆炸效果，非常美丽和有趣。
结语
通过使用Canvas，我们可以非常简单地实现烟花效果。希望这篇博客能对你有所帮助，如果有任何问题或建议，欢迎留言讨论！
更多有关使用Canvas的教程和示例，请访问Canvas官方文档或其他相关资源。
评论 (0)