在 HTML5 中，我們可以使用 canvas 元素來制作一些比較炫酷的效果，比如模擬下雨天氣。下面是一個簡單的下雨代碼示例：

<canvas id="canvas" ></canvas>
<script>
// 獲取 canvas 元素
var canvas = document.getElementById('canvas');
// 將 canvas 元素的寬高設置成與窗口一樣大
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 獲取 canvas 的上下文
var context = canvas.getContext('2d');
// 雨滴數組
var drops = [];
// 雨滴數量
var numDrops = 100;
// 創建雨滴對象
var createDrop = function () {
var drop = {
// 雨滴的位置和速度
x: Math.random() * canvas.width,
y: 0,
speed: Math.random() * 5 + 2,
// 繪制雨滴
draw: function () {
context.beginPath();
context.moveTo(this.x, this.y);
context.lineTo(this.x, this.y + 10);
context.strokeStyle = '#5fc7e5';
context.stroke();
},
// 更新雨滴位置
update: function () {
this.y += this.speed;
if (this.y >canvas.height) {
this.y = 0;
}
}
};
drops.push(drop);
};
// 初始化雨滴數組
for (var i = 0; i< numDrops; i++) {
createDrop();
}
// 繪制和更新雨滴
var draw = function () {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i< numDrops; i++) {
drops[i].draw();
drops[i].update();
}
requestAnimationFrame(draw);
};
// 開始繪制和更新雨滴
draw();
</script>

通過 canvas 元素和 JavaScript 的繪圖 API，我們可以實現下雨效果。代碼中首先獲取了 canvas 元素，并設置其寬度和高度與瀏覽器窗口一致。然后定義了一個雨滴對象，包含了雨滴的位置、速度、繪制和更新方法。接著創建了一個雨滴數組，通過循環調用 createDrop 方法來初始化數組。最后定義了一個 draw 方法用于繪制和更新雨滴。

通過調用 requestAnimationFrame 方法來定時更新畫布，我們可以在瀏覽器中看到下雨的效果。