當我們瀏覽網頁時，經常會看到一些有趣的背景動畫，比如下雨的背景。這種效果使用JavaScript可以輕松實現，下面我來介紹如何制作一款自適應的下雨背景。

下雨動畫的主要部分是用canvas畫出的雨滴，每個雨滴在畫布上以不同的速度和位置向下掉落，并在到達底部時消失。我們可以在JavaScript中創建一個對象表示一個雨滴，對象包括雨滴的位置、速度和大小等屬性。代碼如下：

function Raindrop(canvasWidth, canvasHeight) {
this.x = Math.floor(Math.random() * canvasWidth);
this.y = Math.floor(Math.random() * canvasHeight);
this.speed = Math.floor(Math.random() * 10) + 3;
this.size = Math.floor(Math.random() * 5) + 1;
}

在雨滴對象創建完成后，我們需要在畫布上繪制出雨滴。可以使用canvas的draw方法實現，代碼如下：

Raindrop.prototype.draw = function(ctx) {
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x, this.y + this.size);
ctx.lineWidth = 1;
ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
ctx.stroke();
}

然后，我們需要在頁面中創建canvas元素，并在canvas上繪制出一些雨滴。為了實現自適應屏幕大小的效果，我們可以將頁面的寬高設置為100%。代碼如下：

let canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
let raindrops = [];
for (let i = 0; i < 100; i++) {
raindrops.push(new Raindrop(canvas.width, canvas.height));
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < raindrops.length; i++) {
raindrops[i].y += raindrops[i].speed;
if (raindrops[i].y > canvas.height) {
raindrops[i].y = Math.floor(Math.random() * canvas.height);
}
raindrops[i].draw(ctx);
}
requestAnimationFrame(animate);
}
animate();

最后，在頁面中加入CSS樣式，設置背景色為黑色，并將canvas元素的z-index屬性設置為-1，以便于把它放在頁面的最底層，代碼如下：

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #000;
}
canvas {
position: fixed;
z-index: -1;
}

現在，我們的自適應下雨背景就完成了，可以試著改變瀏覽器窗口大小，看看背景的效果是否也隨之改變。

總之，使用JavaScript實現下雨背景是一種有趣的效果，通過簡單的代碼就可以制作出非常酷炫的動畫，不需要依賴于其他插件或庫，讓我們的網頁更具吸引力。