js实现波浪线
使用SVG路径绘制波浪线
通过SVG的<path>元素可以绘制平滑的波浪线，利用贝塞尔曲线实现波浪效果。以下是一个简单实现：
<svg width="300" height="100" viewBox="0 0 300 100">
<path d="M0,50 C50,0 100,100 150,50 S250,0 300,50"
stroke="blue"
fill="none"
stroke-width="2"/>
</svg>d属性中的C表示三次贝塞尔曲线S命令会自动对称延续前一个控制点- 调整坐标值可以改变波浪的幅度和频率
Canvas动态波浪动画
使用Canvas可以实现动态波浪效果：
const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');
let time = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for(let x = 0; x < canvas.width; x++) {
const y = 50 + 20 * Math.sin(x * 0.05 + time);
ctx.lineTo(x, y);
}
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();
time += 0.1;
requestAnimationFrame(animate);
}
animate();- 通过正弦函数生成波浪形状
- 随时间变化产生动画效果
- 调整振幅和频率参数可改变波浪形态
CSS波浪线效果
使用CSS伪元素和border-radius可以创建简单波浪线：
.wave-line {
position: relative;
height: 20px;
overflow: hidden;
}
.wave-line::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background: radial-gradient(10px at 10px 10px, transparent 50%, blue 50%);
background-size: 20px 20px;
}- 利用径向渐变创建重复的半圆图案
- 调整background-size改变波浪间距
- 适合不需要精确控制的装饰性波浪线
使用第三方库
对于复杂波浪效果，可以考虑使用专业库：
- wavesurfer.js - 音频波形可视化
- mo.js - 专业的运动图形库
- anime.js - 轻量级动画引擎
这些库提供更高级的配置选项和性能优化，适合生产环境使用。
