用html5 canvas实现雨滴涟漪特效需三步：1.用双缓冲高度数组模拟水波传播与衰减；2.通过位移采样法将高度差转为折射扭曲渲染；3.结合雨滴粒子系统触发脉冲并叠加水花效果，全程适配设备像素比与边界保护。
用 HTML5 Canvas 制作“雨滴打在水面”的涟漪特效，关键不是画一圈圈圆，而是模拟水波的传播、衰减与视觉扭曲。整个过程分三步：触发扰动 → 计算波传播 → 渲染水面变形效果。纯 JavaScript + Canvas 2D 即可实现，无需 WebGL 或第三方库。
1. 建立高度缓冲区模拟水波
水面本质是连续的高度场。用两个一维数组（如 Uint16Array）代表当前帧和上一帧的“水高”：
- 数组长度 = 水面宽度 × 高度（建议降采样到 1/2 或 1/4 分辨率，兼顾效果与性能）
- 鼠标点击或雨滴落点处，给对应位置加一个正向脉冲（比如 +128），作为初始扰动
- 每帧用差分公式更新：
next[i] = (curr[i-1] + curr[i+1] + curr[i-width] + curr[i+width]) / 2 - prev[i] - 再乘以阻尼系数（如
0.993），让波自然衰减，避免无限震荡
2. 将高度变化转为视觉涟漪
Canvas 不支持像素级着色器，但可用“位移采样法”低成本模拟折射扭曲：
- 先绘制一张静态背景图（如浅蓝渐变或真实水面底图）到离屏 canvas
- 遍历屏幕每个像素 (x, y)，查其周围高度差（如 dx = h[x+1][y] − h[x−1][y]，dy 同理）
- 用该差值作为偏移量，从原背景图中取
(x + dx * scale, y + dy * scale)处的颜色 - 把采样结果画回主 canvas —— 波峰处向外推，波谷处向内拉，形成自然涟漪感
3. 结合雨滴事件驱动涟漪生成
雨滴既是触发源，也可独立渲染增强真实感：
- 维护一个雨滴粒子数组：含位置、速度、大小、生命周期
- 雨滴落到水面（y ≥ 水面高度）时，在缓冲区对应位置注入脉冲，并重置该雨滴
- 可额外叠加瞬时效果：在落点画一个快速扩散的半透明白色圆环（
globalAlpha从 0.6 降到 0），模拟水花飞溅 - 所有动画统一用
requestAnimationFrame驱动，避免setInterval掉帧
不复杂但容易忽略：设备像素比适配（canvas.width = clientWidth * devicePixelRatio）、缓冲区边界保护（避免读写越界）、以及只对活跃区域做位移计算（大幅优化性能）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
