在HTML中，我們可以使用canvas元素在網頁上放置煙花效果。首先，我們需要在HTML文件的head中引入以下代碼：

<script src="https://cdn.jsdelivr.net/gh/sinographics/circles/canvas/canvas.js"></script>

接下來，在body中創建一個canvas元素：

<canvas id="fireworks"></canvas>

在JavaScript中，我們可以使用以下代碼來繪制煙花：

// 獲取canvas元素
var canvas = document.getElementById("fireworks");
var ctx = canvas.getContext("2d");
// 繪制煙花
function drawFirework(x, y) {
// 設置隨機顏色
var hue = Math.floor(Math.random() * 360);
ctx.fillStyle = "hsl(" + hue + ", 100%, 50%)";
// 繪制圓形
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fill();
// 創建一個隨機長度的路徑
ctx.beginPath();
ctx.moveTo(x, y);
var angle = Math.random() * Math.PI * 2;
var length = Math.random() * 50 + 50;
var endX = x + Math.cos(angle) * length;
var endY = y + Math.sin(angle) * length;
ctx.lineTo(endX, endY);
ctx.stroke();
// 繪制三角形
ctx.beginPath();
ctx.moveTo(endX, endY);
var angle1 = angle + Math.PI * 0.75;
var angle2 = angle + Math.PI * 1.25;
var length1 = Math.random() * 20 + 10;
var length2 = Math.random() * 20 + 10;
var tipX1 = endX + Math.cos(angle1) * length1;
var tipY1 = endY + Math.sin(angle1) * length1;
var tipX2 = endX + Math.cos(angle2) * length2;
var tipY2 = endY + Math.sin(angle2) * length2;
ctx.lineTo(tipX1, tipY1);
ctx.lineTo(tipX2, tipY2);
ctx.closePath();
ctx.fill();
}
// 在合適的位置創建煙花
canvas.addEventListener("click", function(event) {
var x = event.offsetX;
var y = event.offsetY;
drawFirework(x, y);
});

以上代碼將在點擊canvas元素時，在鼠標點擊處創建一個煙花效果。注意，canvas.js文件是外部庫，需要先引入才能使用。