当前位置：首页 > JavaScript

js实现波浪线

2026-02-03 02:16:02JavaScript

使用 SVG 路径绘制波浪线

通过 SVG 的 <path> 元素定义波浪线路径，利用 d 属性设置贝塞尔曲线。以下代码创建一段水平波浪线：

<svg width="200" height="100" viewBox="0 0 200 100">
  <path d="M0 50 C20 10, 40 90, 60 50 S100 10, 120 50 S160 90, 180 50" 
        stroke="#000" fill="none" stroke-width="2"/>
</svg>

M0 50 从坐标 (0,50) 开始。
C20 10, 40 90, 60 50 定义第一段三次贝塞尔曲线，控制点 (20,10) 和 (40,90)，终点 (60,50)。
S100 10, 120 50 使用 S 命令简化后续曲线，对称延续波浪形状。

使用 Canvas 动态绘制波浪线

通过 Canvas 的 quadraticCurveTo 或 bezierCurveTo 方法动态生成波浪动画：

const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');
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 += 20) {
    const y = Math.sin(x * 0.05 + offset) * 20 + canvas.height / 2;
    ctx.lineTo(x, y);
  }

  ctx.strokeStyle = '#3498db';
  ctx.lineWidth = 2;
  ctx.stroke();
  offset += 0.1;
  requestAnimationFrame(drawWave);
}

drawWave();

使用 Math.sin 函数生成周期性波浪效果。
offset 变量控制波浪动态移动。

CSS 动画模拟波浪线

结合伪元素和 CSS 动画实现简单波浪效果：

<style>
  .wave {
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e74c3c, transparent);
    overflow: hidden;
  }
  .wave::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"><path d="M0 5 C5 0, 10 10, 15 5 S25 0, 30 5" stroke="%23e74c3c" fill="none"/></svg>') repeat-x;
    animation: waveMove 1s linear infinite;
  }
  @keyframes waveMove {
    from { transform: translateX(0); }
    to { transform: translateX(-20px); }
  }
</style>
<div class="wave"></div>

通过 SVG 内联背景和 transform 动画实现循环滚动效果。
调整 viewBox 和 path 数据可改变波浪形状。

使用第三方库（如 Anime.js）

若需复杂动画，可使用库简化实现：

import anime from 'animejs';

const path = anime.path('#wavePath');
anime({
  targets: '.dot',
  translateX: path('x'),
  translateY: path('y'),
  duration: 3000,
  loop: true,
  easing: 'linear'
});