HTML5是當前Web編程領域的熱門技術，它提供了各種強大而且創新的功能，其中最受歡迎的就是動畫特效。今天，我將為大家介紹一種非常棒的HTML5煙花特效源代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5煙花特效源代碼</title>
<style>
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
window.onload = function() {
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function Firework() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = Math.random() * 8 - 4;
this.vy = Math.random() * 6 - 3;
this.gravity = 0.1;
this.alpha = 1;
this.color = "rgb(" + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ")";
this.distance = Math.sqrt(this.x * this.x + this.y * this.y);
Firework.prototype.move = function() {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.alpha -= 0.01;
if (this.alpha<= 0) {
fireworks.splice(fireworks.indexOf(this), 1);
}
}
Firework.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.fill();
}
Firework.prototype.explode = function() {
for (var i = 0; i< 50; i++) {
var particle = new Particle(this.x, this.y, this.color);
particles.push(particle);
}
}
}
function Particle(x, y, color) {
this.x = x;
this.y = y;
this.vx = Math.random() * 8 - 4;
this.vy = Math.random() * 8 - 4;
this.gravity = 0.1;
this.alpha = 1;
this.color = color;
Particle.prototype.move = function() {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.alpha -= 0.01;
if (this.alpha<= 0) {
particles.splice(particles.indexOf(this), 1);
}
}
Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.fill();
}
}
var fireworks = [];
var particles = [];
setInterval(function() {
var firework = new Firework();
fireworks.push(firework);
}, 200);
function loop() {
requestAnimationFrame(loop);
ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i< fireworks.length; i++) {
fireworks[i].move();
fireworks[i].draw();
if (fireworks[i].vy >= 0) {
fireworks[i].explode();
}
}
for (var i = 0; i< particles.length; i++) {
particles[i].move();
particles[i].draw();
}
}
loop();
}
</script>
</body>
</html>源代碼如上所示，它使用了HTML5的canvas元素和JavaScript的requestAnimationFrame函數創建了一個非常生動的煙花特效。如果你想要在Web應用程序或網站中添加一些有趣的動畫效果，那么這種特效是一個不錯的選擇。