### [波浪背景做了三版：最后还是 SVG 稳](https://www.huociguo.com/article/1821)

**Published:** 2026-10-02T10:45:36

**Author:** 米了

**Excerpt:** 活动页要个动态波浪背景，前后做了三版 🌊。PNG 背景图、canvas 实时波动、SVG 路径动画，每版都有教…

活动页要个动态波浪背景，前后做了三版 🌊。PNG 背景图、canvas 实时波动、SVG 路径动画，每版都有教训，最后留下的方案出乎意料地朴素。

![彩色流体波浪抽象画](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-34991363.jpeg)

波浪背景的三条路线：位图、canvas、SVG

## 第一版：PNG 背景图

设计稿导出一张大波形图直接铺上。问题立刻出现：宽屏拉伸出锯齿，高清图体积又大，不同分辨率下波形位置还对不齐 ❌。半天就放弃了。

## 第二版：canvas 实时波动

正弦叠加画曲线，效果确实灵动。代价也跟着来：窗口 resize 要重建画布，devicePixelRatio 不匹配就发虚，低端手机上帧率肉眼可见地掉 ⚠️。功能写完，适配代码比画图代码还多。

## 第三版：SVG 加 CSS 动画

```
<svg viewBox="0 0 1440 320" preserveAspectRatio="none">
  <path d="M0,160 C360,80 1080,240 1440,160 L1440,320 L0,320 Z"/>
</svg>
```

```
.wave path { animation: drift 8s linear infinite alternate; }
@keyframes drift { to { transform: translateX(-60px); } }
```

矢量天然不怕缩放，viewBox 配合 `preserveAspectRatio="none"` 任意拉伸 ✅。动画走 transform，合成层完成，移动端也稳。多层波浪就叠几条 path，透明度与动画时长错开，层次感立刻有了。

## canvas 的真正适用面

需要实时扰动、鼠标交互或者粒子叠加时，canvas 依然是不二之选。普通的装饰性波浪用不上这份灵活，SVG 足够且省心。

结论：装饰波浪选 SVG，交互波浪选 canvas，位图方案可以直接跳过。

**Tags:** CSS动画, SVG动画, 波浪背景, 盒模型, 背景效果

**Categories:** HTML5

---