煙花作為中國傳統文化的代表之一，是表達喜慶、慶祝的符號。而在HTML5技術的支持下，我們也可以用代碼實現一個簡單的煙花效果。以下是示例代碼：

/* HTML */
<canvas id="fireworks"></canvas>
/* CSS */
#fireworks {
background-color: black;
}
/* JS */
const canvas = document.getElementById('fireworks');
const ctx = canvas.getContext('2d');
function Firework() {
this.x = Math.random() * canvas.width;
this.y = canvas.height;
this.color = '#' + Math.floor(Math.random() * 16777215).toString(16);
this.radius = 3;
this.velocity = {
x: Math.random() * 6 - 3,
y: Math.random() * 3 + 3
};
this.ring = [];
this.opacity = 1;
}
Firework.prototype.setBorder = function () {
for (let i = 0; i< 8; i++) {
this.ring.push({
x: this.x,
y: this.y,
radius: this.radius * (i + 1)
});
}
};
Firework.prototype.update = function () {
this.x += this.velocity.x;
this.y -= this.velocity.y;
this.opacity -= 0.005;
if (this.opacity<= 0) {
return true;
}
this.setBorder();
return false;
};
Firework.prototype.draw = function () {
for (let i = 0; i< this.ring.length; i++) {
ctx.beginPath();
ctx.arc(this.ring[i].x, this.ring[i].y, this.ring[i].radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = this.color + Math.ceil(this.opacity * 255).toString(16);
ctx.fill();
}
};
const fireworks = [];
function animate() {
ctx.fillStyle = 'rgba(0,0,0,0.15)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (Math.random()< 0.05) {
fireworks.push(new Firework());
}
for (let i = 0; i< fireworks.length; i++) {
fireworks[i].draw();
if (fireworks[i].update()) {
fireworks.splice(i, 1);
}
}
requestAnimationFrame(animate);
}
animate();

在這個示例代碼中，我們使用了canvas元素來繪制煙花。通過Firework函數創建一個煙花對象，并使用隨機的參數賦值。在update方法中進行煙花的運動軌跡計算、繪制及煙花的邊框繪制，在draw方法中對煙花邊框進行顏色及透明度渲染，在animate函數中通過requestAnimationFrame方法來不斷重繪畫布從而實現煙花不斷的出現及燃放的效果。

最后附上運行效果：