在网页里实现下雨效果，最轻量也最灵活的方案就是使用HTML5的Canvas配合JavaScript来控制每一滴雨的运动。相比用大量DOM元素模拟，Canvas把全部雨滴画在一张位图上，由脚本统一计算位置，既方便做物理下落，也不会因为节点过多拖慢浏览器。
一、Canvas画布与基本结构
首先要在页面中放一个<canvas>标签，并用JS拿到它的绘图上下文。绘图上下文分为2d和webgl，雨滴动画用2d就足够了。需要注意画布的宽度和高度最好直接用JS设置为窗口大小，避免CSS拉伸导致雨滴变形。
下面是一段最基础的HTML和初始化代码。我们把canvas铺满整个屏幕，并在脚本里取得ctx对象，后续所有绘制都通过它完成。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas雨滴</title>
<style>
body { margin: 0; overflow: hidden; background: #222; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="rain"></canvas>
<script src="rain.js"></script>
</body>
</html>
在rain.js中，我们先做画布尺寸适配。监听窗口resize事件，可以让用户改变窗口时雨滴区域自动跟着变，不至于出现右边或下边没雨的情况。
const canvas = document.getElementById('rain');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
二、雨滴对象与下落逻辑
每一滴雨都可以抽象成一个对象，包含横坐标x、纵坐标y、下落速度speed、线段长度length和透明度alpha。用数组保存很多这样的对象，就组成了雨幕。在动画帧里，让y不断增加speed，当y大于画布高度时，把y重新设到负高度位置，实现循环下落。
为了看起来自然，雨滴一般画成半透明的细线而不是圆点。线段的终点y2等于y加length，x坐标不变，这样就是垂直落下的雨丝。速度也可以带一点随机，避免所有雨滴整齐划一显得假。
function createDrop() {
return {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height - canvas.height,
length: 10 + Math.random() * 20,
speed: 4 + Math.random() * 4,
alpha: 0.3 + Math.random() * 0.4
};
}
const drops = [];
for (let i = 0; i < 200; i++) {
drops.push(createDrop());
}
上面的createDrop函数在画布上方随机生成雨滴，初始y可能是负数，这样页面一打开雨就已经在下了。数组里放200个元素，在普通电脑上完全不会卡。
三、用requestAnimationFrame驱动动画
过去很多人用setInterval来刷新，但那样不容易和浏览器刷新率同步，还容易堆积回调。现代做法是用requestAnimationFrame，它会在每次浏览器重绘前调用你的函数，通常是每秒60次，动画更顺滑也更省电。
每一帧我们要先清空画布，否则上一帧的雨丝会留在上面。清空可以用clearRect，也可以用带透明度的fillRect做出拖尾效果。接着遍历drops数组，更新y并画线条，最后再次请求下一帧。
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
ctx.lineCap = 'round';
for (const d of drops) {
ctx.strokeStyle = 'rgba(180,200,255,' + d.alpha + ')';
ctx.beginPath();
ctx.moveTo(d.x, d.y);
ctx.lineTo(d.x, d.y + d.length);
ctx.stroke();
d.y += d.speed;
if (d.y > canvas.height) {
d.y = -d.length;
d.x = Math.random() * canvas.width;
}
}
requestAnimationFrame(draw);
}
draw();
在draw函数里，我们把strokeStyle设成带透明度的浅蓝色，模拟雨的反光。moveTo和lineTo画出一条短竖线，stroke执行绘制。更新y后判断越界，越界就回到顶部并换一个新x，雨滴就源源不断了。
四、增加风力和交互控制
真实下雨常有斜风，只要给雨滴加一个横向速度vx，并在更新时改x即可。还可以用鼠标位置影响风向，比如鼠标往右移风就往右吹，这样页面显得更有趣。下面演示如何加vx并做简单跟随。
我们在createDrop里加vx属性，默认小随机值。draw里同时改x和y，并让x越界时从另一侧回来。若想用鼠标控制，可在mousemove里改全局wind变量，赋给vx。
let wind = 0;
window.addEventListener('mousemove', function(e) {
wind = (e.clientX / window.innerWidth - 0.5) * 4;
});
function createDrop() {
return {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height - canvas.height,
length: 10 + Math.random() * 20,
speed: 4 + Math.random() * 4,
vx: 0,
alpha: 0.3 + Math.random() * 0.4
};
}
// 在draw的循环内增加：
// d.vx += (wind - d.vx) * 0.02;
// d.x += d.vx;
// if (d.x > canvas.width) d.x = 0;
// if (d.x < 0) d.x = canvas.width;
这种写法让风感平滑过渡，不会突兀变向。你也能把雨滴数量、速度通过滑块绑定到input事件上，实时调参，很快就能调出满意的暴雨或细雨效果。
五、性能与细节优化
如果雨滴数上千，每帧都beginPath和stroke会稍费CPU。可以按透明度分组，或者把线条合成一个路径再一次性stroke。另外在移动端要适当减少数量，并监听visibilitychange，页面隐藏时暂停动画，回来再继续，能省不少电。
最后提醒，Canvas绘图上下文获取一次即可，不要每帧getContext。清除画布用clearRect比fillRect全屏快。只要把握住对象数组、帧循环、越界重置这三个要点，HTML5用Canvas做雨滴动画并拿JS控制下落，其实非常直接。
HTML5CanvasJavaScript修改时间：2026-08-04 02:36:31