高性能水波纹需用像素级位移映射而非滤镜，以requestAnimationFrame驱动并节流；预分配getImageData缓冲区复用；采用距离衰减多频正弦偏移公式；限制扰动范围与画布尺寸，禁用抗锯齿。
要用 HTML5 Canvas 实现高性能的动态水波纹效果，关键不在“加滤镜”，而在于用像素级位移映射模拟真实扰动——必须绕过 CSS filter、SVG 滤镜或纯色动画，直接操作图像采样坐标。
用 requestAnimationFrame 驱动稳定帧循环
避免 setTimeout 或 setInterval：它们无法与屏幕刷新率同步，易掉帧或撕裂。requestAnimationFrame 是唯一推荐方式，但需配合手动节流：
- 每帧只做必要计算，不重复创建对象或调用高开销 API
- 若目标是 60fps，time 增量建议设为 0.02～0.05（单位为弧度），太快会视觉眩晕，太慢显迟滞
- 在页面不可见时（visibilitychange 事件）暂停动画，节省资源
预分配 imageData 缓冲区防卡顿
getImageData 每次调用都会分配新内存，1920×1080 图像单次拷贝就触发约 800 万字节分配，频繁 GC 导致明显卡顿甚至报错。正确做法是复用同一块缓冲区：
- 初始化时用 ctx.createImageData(width, height) 创建一次，保存 data 数组引用
- 动画中仅修改 data[i]、data[i+1] 等值，再 putImageData 输出，跳过重建开销
- 注意 data 是 Uint8ClampedArray，长度 = width × height × 4，索引 i 对应 R，i+1 对应 G，i+2 对应 B，i+3 对应 A
按距离衰减的正弦偏移公式
生硬的 Math.sin(x + time) * amp 会显得机械。真实水波需满足中心强、边缘弱、多频叠加。推荐这个轻量组合：
立即学习“前端免费学习笔记（深入）”；
- 横向偏移 dx = (Math.sin(dist * 0.03 + time) + Math.sin(dist * 0.07 + time * 0.6)) * 3
- 纵向偏移 dy = Math.cos(dist * 0.04 + time * 0.8) * 2
- 其中 dist = Math.sqrt((x - centerX)² + (y - centerY)²)，centerX/Y 来自鼠标点击或预设扰动源
- 幅度控制在 2–8 像素内，超出易撕裂；频率系数 0.01–0.05 较自然
限制处理范围提升响应速度
全图逐像素运算在中低端设备上极易卡死。实用优化策略包括：
- 画布尺寸不超过 800×600，用 drawImage 缩放原始图后再处理
- 只对鼠标附近半径 150px 区域应用扰动，其余区域直通原图
- 启用 devicePixelRatio 缩放适配，但渲染时按逻辑分辨率计算，避免高 DPI 下盲目放大计算量
- 禁用抗锯齿（imageSmoothingEnabled = false），减少插值开销
