HTML彩色噴泉是一個非常有趣的效果，可以在網站上添加動態和生動的元素。下面是一個簡單的HTML彩色噴泉的代碼：

<canvas id="myCanvas"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
// 創建顏色數組
var colors = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#8F00FF"];
// 創建噴泉數量
var numFountains = 50;
// 創建所有噴泉的位置和顏色
var fountains = [];
for (var i = 0; i < numFountains; i++) {
var x = Math.random() * width;
var y = Math.random() * height;
var color = colors[Math.floor(Math.random() * colors.length)];
fountains.push({
x: x,
y: y,
color: color,
velocity: -1 - Math.random()
});
}
// 創建繪制函數
function draw() {
// 填充黑色背景
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, width, height);
// 繪制每一個噴泉
for (var i = 0; i < fountains.length; i++) {
var fountain = fountains[i];
// 繪制噴泉
ctx.fillStyle = fountain.color;
ctx.fillRect(fountain.x, fountain.y, 5, 20);
// 更新噴泉位置
fountain.y += fountain.velocity;
// 如果噴泉超出屏幕，將其放回頂部
if (fountain.y < -20) {
fountain.y = height;
}
}
// 調用下一次繪制函數
requestAnimationFrame(draw);
}
// 開始繪制
draw();
};
</script>

通過修改變量，可以調整噴泉數量和顏色，使其適應您網站的樣式和需求。希望這個代碼片段能夠為您的網站增添一些樂趣和生氣！