canvas动态水波纹效果通过正弦函数建模实现：y = basey + amplitude × sin(x × frequency + time × speed) + offset，支持多频叠加与点击扰动衰减模拟。
Canvas 绘制 2D 环境下的动态水波纹效果，核心在于用数学建模模拟波动传播，而非依赖滤镜或动画库。它不靠视觉叠加，而是通过像素采样偏移或路径重绘，让水面看起来真实起伏、有衰减、有交互响应。
用正弦函数驱动波形流动
最常用且轻量的方式是沿水平方向绘制一条正弦曲线作为“水线”，再让它随时间平移。关键公式是：
y = baseY + amplitude × sin(x × frequency + time × speed) + offset
其中 baseY 是静止水位，amplitude 控制起伏高度（建议 10–30px），frequency 决定波长（0.01–0.04 较自然），speed 控制流动快慢（0.03–0.08 弧度/帧）。多加一层不同频率与相位的 sin 或 cos 叠加（比如主波 + 次波），就能避免单调感。
支持点击扰动的局部波纹模拟
要实现“点哪漾哪”的交互效果，需在鼠标位置触发衰减式扰动：
• 记录点击坐标 (cx, cy)，每帧按距离 dist = √[(x−cx)²+(y−cy)²] 计算影响强度
• 偏移量设为 dx = A × sin(dist × k + t) / (1 + dist × 0.01)，分母实现自然衰减
• 仅对 dist
性能关键：节流 + 缓冲复用 + 分辨率控制
Canvas 水波容易卡顿，不是因为算法复杂，而是内存和渲染失控：
• 必须用 requestAnimationFrame 驱动，禁用 setInterval
• 初始化时调用 ctx.createImageData(w, h) 一次，后续只改 data 数组值，避免频繁 GC
• 画布逻辑尺寸建议 ≤ 800×600；高 DPI 设备用 devicePixelRatio 缩放 canvas.style，但计算仍按逻辑尺寸
• 关闭抗锯齿（ctx.imageSmoothingEnabled = false）可减少模糊开销，尤其用于像素级偏移时
进阶：叠加倒影与半透明水体
增强真实感可补充两个视觉层：
• 先 drawImage 原图 → 对称翻转绘制倒影 → 加渐变遮罩模拟水体透明衰减
• 主水波用 fillStyle = 'rgba(100, 149, 237, 0.5)'，叠加第二层低振幅、高频率波纹提升细节
• 若需折射扭曲，须用 getImageData 读取背景像素，按 dy 偏移采样后再 putImageData 输出——这属于像素级映射，不可跳过
