当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5动态水波效果制作教程

HTML5动态水波效果制作教程

2026-01-05 14:28:48 0浏览收藏

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 场景并响应物理碰撞”——选错路径，后面全是坑。

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

HTML5建模