下面是一个使用 JavaScript 和 HTML5 Canvas 实现的动态波浪效果的完整示例。这个效果使用正弦波函数来模拟水面的波动，支持颜色渐变和动态变化。
✅ 效果说明：
- 使用
canvas绘制波浪。 - 多层波浪叠加，形成更自然的动态效果。
- 波浪随时间不断移动（动画）。
- 可调节波浪的高度、频率、速度等。
📄 HTML 文件（index.html）
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>动态波浪效果</title><style>body {margin: 0;overflow: hidden;background-color: #000;}canvas {display: block;}</style>
</head>
<body><canvas id="waveCanvas"></canvas><script>const canvas = document.getElementById('waveCanvas');const ctx = canvas.getContext('2d');// 设置 canvas 全屏canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 波浪配置const waveCount = 3; // 波浪层数const waveSpeed = 0.02; // 波浪移动速度const waveHeight = 80; // 波浪高度const baseY = canvas.height * 0.5; // 基准线（水面中心）// 颜色渐变const colors = ['#0077be', '#00aaff', '#005588'];// 动画参数let time = 0;function drawWave() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 创建渐变背景（可选）const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);gradient.addColorStop(0, '#001122');gradient.addColorStop(1, '#003366');ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制多层波浪for (let i = 0; i < waveCount; i++) {const amplitude = waveHeight * (1 - i * 0.2); // 每层高度递减const frequency = 0.01 + i * 0.005;const speed = waveSpeed * (i + 1);const offsetY = baseY + 20 * Math.sin(time * 0.5 + i); // 微小上下浮动ctx.beginPath();ctx.moveTo(0, canvas.height);for (let x = 0; x <= canvas.width; x += 5) {const y =offsetY +amplitude *Math.sin((x * frequency) / 2 + time * speed) *Math.sin((x * frequency) + time * speed * 0.7); // 复合波形ctx.lineTo(x, y);}ctx.lineTo(canvas.width, canvas.height);ctx.lineTo(0, canvas.height);ctx.closePath();// 设置填充颜色ctx.fillStyle = colors[i % colors.length];ctx.globalAlpha = 0.6 - i * 0.1; // 透明度递减ctx.fill();}ctx.globalAlpha = 1; // 重置透明度time += 0.05;requestAnimationFrame(drawWave);}// 窗口大小改变时重置 canvaswindow.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;baseY = canvas.height * 0.5; // 重新计算基准线});// 开始动画drawWave();</script>
</body>
</html>
🔍 效果特点：
- 多层波浪：叠加 3 层不同频率和振幅的波，使效果更真实。
- 动态移动：通过
time变量实现波浪流动。 - 视觉层次：使用透明度和颜色渐变增强立体感。
- 响应式：窗口缩放时自动调整画布大小。
🎨 可自定义参数：
| 参数 | 说明 |
|---|---|
waveCount |
波浪层数 |
waveSpeed |
波浪移动速度 |
waveHeight |
最大波高 |
baseY |
波浪中心线位置 |
colors[] |
每层波浪颜色 |
amplitude, frequency |
控制波形形状 |
✅ 运行方式：
- 将代码保存为
index.html - 用浏览器打开即可看到动态波浪效果
如果你想加入鼠标交互（如波浪朝鼠标方向涌动），也可以扩展实现，需要监听 mousemove 事件并调整波浪中心。
-asctime())
