答案：利用HTML5 Canvas和JavaScript，通过正弦函数生成动态波浪。首先获取Canvas上下文，设置画布尺寸，使用beginPath、moveTo和lineTo绘制路径，结合Math.sin函数计算Y轴偏移，通过requestAnimationFrame循环更新相位offset实现波浪滚动动画；可叠加多层不同频率振幅的波形增强真实感，使用createLinearGradient实现渐变填充，并通过clearRect清除画面保持动画流畅。性能上建议减少绘图点密度、复用变量，避免卡顿。
用HTML5的Canvas实现波浪效果，核心是利用CanvasRenderingContext2D提供的路径绘制方法，结合JavaScript动态更新路径坐标。关键在于使用正弦或余弦函数生成平滑波动的曲线，并通过定时重绘形成动画。
Canvas路径绘制的基本原理
Canvas是一个基于状态的绘图API，所有图形都通过“路径（path）”来定义。绘制波浪前，需要了解以下几个核心步骤：
- beginPath()：开始一条新路径，清除之前的绘图命令
- moveTo(x, y)：将画笔移动到指定坐标，不绘制线条
- lineTo(x, y)：从当前点画直线到新坐标
- quadraticCurveTo() / bezierCurveTo()：绘制二次或三次贝塞尔曲线，适合更平滑的波形
- stroke()：描边路径，实际显示图形
- clearRect()：清空画布区域，用于动画刷新
波浪通常用sin(x)函数控制Y轴偏移，X轴按固定间隔递增，形成连续起伏。
使用sin函数绘制动态波浪
正弦函数天生具有周期性，非常适合模拟水波。通过改变相位（offset），可以让波浪动起来。
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 400;
let offset = 0;
function drawWave() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
for (let x = 0; x <= canvas.width; x += 10) {
const y = canvas.height / 2 + Math.sin((x / 50) + offset) * 50;
ctx.lineTo(x, y);
}
ctx.strokeStyle = '#00bfff';
ctx.lineWidth = 3;
ctx.stroke();
offset += 0.1; // 更新相位，制造移动效果
requestAnimationFrame(drawWave);
}
drawWave();
这段代码每帧重新计算每个点的Y值，offset不断累加，使整个波形向左滚动。
增强视觉效果：多层波浪与渐变填充
真实感更强的波浪常采用多层叠加，比如主波+扰动波，还可以使用渐变色提升观感。
- 叠加多个sin波（不同频率、振幅、相位）可模拟复杂水面
- 用
createLinearGradient()创建垂直渐变，从深蓝到透明，模仿水的通透感 - 闭合路径后使用
fill()实现填充效果
例如添加第二条波：
const y1 = Math.sin((x / 50) + offset) * 50; const y2 = Math.sin((x / 30) - offset) * 20; const y = canvas.height / 2 + y1 + y2;
这样会产生更自然的波纹干扰效果。
性能优化建议
高频重绘容易造成卡顿，注意以下几点：
- 使用
requestAnimationFrame而非setInterval，保证流畅同步屏幕刷新率 - 减少绘制点密度，
x += 10比x += 1性能更好，肉眼几乎看不出差异 - 避免频繁创建对象或数组，尽量复用变量
- 复杂动画可考虑WebGL，但简单波浪Canvas完全胜任
基本上就这些。掌握路径绘制和三角函数的结合，就能在Canvas上做出各种动态波浪效果，适用于背景动画、数据可视化或游戏元素。
