SVG 波浪背景的基本做法是什么？

一条 path 画出波形，viewBox 加 preserveAspectRatio=none 适配宽度，再用 CSS 关键帧动画做 transform 位移。

canvas 什么时候才值得用？

需要实时扰动、鼠标交互或粒子叠加的场景。装饰性波浪用 SVG 更简单稳定。

设备像素比。canvas 缓冲区需要按 DPR 倍数放大并缩放上下文，否则高分屏上画面发虚。

叠加多条 path，分别设置不同的透明度、颜色与动画时长，运动时自然形成前后层次。

动画只动 transform 与 opacity，走合成层不触发重排重绘。避免对 path 的 d 属性做高频 JS 改写。

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

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

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

<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 依然是不二之选。普通的装饰性波浪用不上这份灵活，SVG 足够且省心。

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