HTML5水波效果需借助Canvas 2D、WebGL（如Three.js）或CSS实现：Canvas适合轻量正弦波，Three.js支持反射折射的真实水面，CSS mask-image仅用于静态视觉欺骗。
HTML5 本身不提供“建模”能力，也没有内置的 dynamic water wave 或 surface ripple API。所谓“HTML5 水波效果”，实际是用 Canvas 2D 或 WebGL（常通过 Three.js）模拟物理波动，配合数学计算（如正弦叠加、FFT、或基于顶点位移的着色器）实现视觉动效。
Canvas 2D 实现简易正弦水波（适合轻量级页面）
这是最易上手的方式，适用于 banner、卡片 hover 波纹等场景。核心是用 Math.sin() 驱动每列像素的垂直偏移，并逐帧重绘。
- 关键点：不能直接修改图像像素，需用
context.getImageData()+putImageData()做逐像素扰动，性能差；推荐用“绘制多条正弦线 + 渐变填充”模拟水面轮廓 - 避免在
requestAnimationFrame中反复创建Path2D或调用fillRect全屏重绘——改用clearRect+ 单次fill路径 - 相位偏移要统一用时间戳驱动，别用
setInterval，否则动画卡顿
const canvas = document.getElementById('water');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
let time = 0;
function drawWave() {
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.moveTo(0, height / 2);
for (let x = 0; x <= width; x += 2) {
const y = height / 2 + Math.sin(x 0.02 + time) 20 +
Math.sin(x 0.05 + time 0.7) * 8;
ctx.lineTo(x, y);
}
ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.closePath();
ctx.fillStyle = 'rgba(100, 149, 237, 0.6)';
ctx.fill();
}
function animate() {
time += 0.05;
drawWave();
requestAnimationFrame(animate);
}
animate();
Three.js + ShaderMaterial 实现真实感水面（含反射/折射）
需要真正物理感水面（比如游戏、产品展示），必须进 WebGL 层。Three.js 的 ShaderMaterial 是主流选择，但注意：它不自动处理反射纹理，得手动用 WebGLRenderTarget 渲染场景到纹理再传入着色器。
- 顶点着色器里用
sin(uTime + vUv.x * frequency)扰动position.y，频率/振幅要分层（主波 + 次波）才自然 - 片元着色器中，反射采样依赖
reflect()和摄像机方向，若没正确传入cameraPosition或normal，会看到“贴图滑动”而非真实反射 - 别忘了开启
renderer.shadowMap.enabled = true，否则动态物体投在水面上的阴影不会更新
用 CSS mask-image + @keyframes 做静态波纹动效（仅视觉欺骗）
如果只要“看起来像水波晃动”的加载提示或背景装饰，CSS 方案最省资源。本质是用 SVG 波形路径做遮罩，再用 @keyframes 平移该遮罩。
立即学习“前端免费学习笔记（深入）”；
- SVG 路径必须闭合（
Z闭合），否则mask-image不生效 -
mask-position动画比transform: translateX更稳——后者可能触发重排，前者只重绘 - 兼容性注意：
mask-image在 Safari 需加-webkit-mask-image前缀，且不支持mask-border
.water-effect {
background: linear-gradient(135deg, #415a77, #778da9);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,10 Q30,5 60,10 T120,10 L120,20 L0,20 Z' fill='white'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,10 Q30,5 60,10 T120,10 L120,20 L0,20 Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask-position: 0 0;
mask-position: 0 0;
animation: wave-shift 4s infinite linear;
}
@keyframes wave-shift {
to { -webkit-mask-position: 120px 0; mask-position: 120px 0; }
}
真正难的不是画出一条波，而是让波与光照、视角、交互（比如鼠标扰动）实时耦合。多数人卡在“波形算对了，但反射图没更新”或“Canvas 帧率掉到 20fps”。动手前先明确：你要的是“能点开就看的示意效果”，还是“要集成进 Three.js 场景并响应物理碰撞”——选错路径，后面全是坑。
