HTML5动态水波效果制作教程

从现在开始，我们要努力学习啦！今天我给大家带来《HTML5建模动态水波效果制作详解》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

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;
<p>function drawWave() {
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.moveTo(0, height / 2);</p><p>for (let x = 0; x <= width; x += 2) {
const y = height / 2 + Math.sin(x <em> 0.02 + time) </em> 20 +
Math.sin(x <em> 0.05 + time </em> 0.7) * 8;
ctx.lineTo(x, y);
}</p><p>ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.closePath();
ctx.fillStyle = 'rgba(100, 149, 237, 0.6)';
ctx.fill();
}</p><p>function animate() {
time += 0.05;
drawWave();
requestAnimationFrame(animate);
}
animate();</p>

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;
}
<p>@keyframes wave-shift {
to { -webkit-mask-position: 120px 0; mask-position: 120px 0; }
}</p>

真正难的不是画出一条波，而是让波与光照、视角、交互（比如鼠标扰动）实时耦合。多数人卡在“波形算对了，但反射图没更新”或“Canvas 帧率掉到 20fps”。动手前先明确：你要的是“能点开就看的示意效果”，还是“要集成进 Three.js 场景并响应物理碰撞”——选错路径，后面全是坑。

终于介绍完啦！小伙伴们，这篇关于《HTML5动态水波效果制作教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！