HTML煙花特效是一種非常流行的網頁設計效果，它能夠在您的網站上創建炫酷的視覺效果。

<canvas id="canvas"></canvas>
<script>
// 獲取畫布對象
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 設置畫布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定義煙花數組
var fireworks = [];
// 煙花對象
function Firework() {
this.x = Math.random() * canvas.width;
this.y = canvas.height;
this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)';
this.radius = Math.random() * 2 + 1;
this.velocity = {
x: Math.random() * 6 - 3,
y: Math.random() * 3 - 8
};
this.gravity = 0.1;
this.life = Math.random() * 100 + 100;
this.remainingLife = this.life;
}
// 更新煙花
Firework.prototype.update = function(index) {
this.velocity.y += this.gravity;
this.x += this.velocity.x;
this.y += this.velocity.y;
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
context.fillStyle = this.color;
context.fill();
if (this.remainingLife<= 0) {
fireworks.splice(index, 1);
}
this.remainingLife -= 1;
};
// 創建煙花
function createFirework() {
var firework = new Firework();
fireworks.push(firework);
}
// 循環播放煙花效果
setInterval(function() {
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(0, 0, canvas.width, canvas.height);
fireworks.forEach(function(firework, index) {
firework.update(index);
});
if (Math.random()< 0.15) {
createFirework();
}
}, 30);
</script>

上面的代碼中，我們定義了一個Firework()對象來控制煙花的行為。它有隨機的位置、速度、顏色和生命周期。我們還定義了createFirework()函數來創建新的煙花。最后，我們使用setInterval()函數來循環播放煙花效果。

要使用這個煙花效果，您只需將上述代碼復制粘貼到您的HTML文件中，并將canvas標簽插入到您的網頁中。您還可以調整代碼中的某些變量，例如gravity和radius，以創建自己的獨特效果。