波浪背景生成器：几根曲线一拖动，导出 SVG 直接当封面

找背景图最烦的不是找不到，而是找到一张放到网页上发现放大就糊、颜色还不搭。这个工具直接在浏览器里叠 2~6 条波浪曲线，拖动控制点就能改振幅、波长、相位和颜色，实时预览多层叠加效果；配色支持渐变和随机生成，最后一键导出干净的 SVG 代码，放大缩不变形，拿来当封面、登录页背景或海报底图都行。先看成品，再讲这个网页怎么用一段提示词做成单文件应用并部署上线。

这个工具做什么

它把「波浪背景生成器」做成一个零依赖的单页应用：

• 2~6 条波浪叠加：每条独立调振幅、波长、相位、颜色、透明度和上下偏移。
• 拖控制点直接改：拖波峰控制点改振幅和相位，拖波谷控制点改波长，曲线跟着手走。
• 渐变配色：整组波浪在一段渐变色带上自动插值，画面统一不再「每层各唱各的」。
• 背景渐变：单独控制顶部/底部颜色和渐变角度，想要深色、亮色都能随手调。
• 随机生成：一键换一套振幅、波长、配色，灵感来了先随机再微调。
• 导出即用：一键生成 SVG 代码并复制，还能直接下载 .svg 文件。

准备环境：进入码道CodeArts

本文用 CodeArts 的 WebUI 版来演示。先进入 CodeArts 并开通体验版，不需要装任何软件，浏览器就能用：

进入 CodeArts：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「波浪背景生成器」网页应用：用户可以拖动控制点调整 2~6 条波浪曲线的振幅、波长、相位和颜色，实时预览多层叠加的波浪背景；支持渐变配色、随机生成，并能一键导出可直接使用的 SVG 代码并复制；界面简洁美观，单个网页即跑即玩。完成后部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这个项目里的实际动作：

• 在 /workspace/wave-bg-generator 下创建单文件 index.html，把 SVG 曲线生成、控制点拖拽、渐变配色和导出逻辑都放进一个文件，无第三方依赖。
• 先探测空闲端口，再写文件、用 python3 -m http.server 启动服务并自检 HTTP 200。
• 生成可访问的预览地址，并附上功能说明。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 波浪就是正弦函数，SVG 路径是采样出来的

单条波浪的核心只有一行：y = 基线 + 偏移 + 振幅 × sin(2πx/波长 + 相位)。buildPathD 每行采样 140 个点，最后落到底边封口成可填充区域：

function waveY(w, x){
  const k = TAU / Math.max(1, w.wavelength);
  return baseY() + w.yOffset + w.amplitude * Math.sin(k*x + w.phase);
}

function buildPathD(w){
  const steps = 140;
  let d = `M 0 ${waveY(w, 0).toFixed(2)}`;
  for(let i = 1; i <= steps; i++){
    const x = state.width * i / steps;
    d += ` L ${x.toFixed(2)} ${waveY(w, x).toFixed(2)}`;
  }
  d += ` L ${state.width} ${state.height} L 0 ${state.height} Z`;
  return d;
}

2. 控制点直接反算参数

画布上有两个控制点：波峰点管振幅和相位，波谷点管波长。拖动时不是瞎改坐标，而是立刻从鼠标位置反推出正弦参数，再重新渲染：

function onHandleMove(e){
  if(!drag) return;
  const rect = svg.getBoundingClientRect();
  const sx = state.width/rect.width, sy = state.height/rect.height;
  const dx = (e.clientX-drag.startX)*sx;
  const dy = (e.clientY-drag.startY)*sy;
  const w = state.waves[drag.i];
  const h = drag.handles;
  const by = baseY();

  if(drag.which === "a"){
    const newY = h.a.y + dy;
    const newX = clamp(h.a.x + dx, 0, state.width);
    w.amplitude = clamp(by-newY, -by, by) || 0.001;
    const k = TAU/Math.max(1, w.wavelength);
    w.phase = Math.PI/2 - k*newX;
    w.phase = ((w.phase % TAU) + TAU) % TAU;
  } else {
    const newX = clamp(h.b.x + dx, 0, state.width);
    const newY = h.b.y + dy;
    let wl = 2*Math.abs(newX - h.a.x);
    wl = clamp(wl, 24, state.width*2);
    w.wavelength = wl;
  }
  renderPanel();
  render();
}

3. 渐变色带让多层波浪自动统一

如果每条波浪各挑一个颜色，叠加后很容易花掉。applyPalette 只在 HSL 空间里做线性插值：先把起止色转成 HSL，再按层的序号均匀分配颜色：

function applyPalette(){
  if(!state.palette.enabled) return;
  const start = hexToHsl(state.palette.start);
  const end = hexToHsl(state.palette.end);
  const n = state.waves.length;
  state.waves.forEach((w, i) => {
    const t = n <= 1 ? 0 : i/(n-1);
    w.color = hslToHex(
      start.h + (end.h-start.h)*t,
      start.s + (end.s-start.s)*t,
      start.l + (end.l-start.l)*t
    );
  });
}

4. 导出时把「预览状态」重写成正式 SVG

预览里的渐变、曲线都是运行时的 JS 状态，导出 exportSvg 不直接拷 DOM，而是按当前状态重新拼一段干净的 <svg>：定义渐变、铺背景矩形、逐层生成波浪 path，颜色和透明度都写成属性：

function exportSvg(){
  const W = state.width, H = state.height;
  let out = [];
  out.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">`);
  if(state.bg.enabled){
    out.push(`    <linearGradient id="bg" ...>`);
    out.push(`      <stop offset="0" stop-color="${state.bg.top}"/>`);
    out.push(`      <stop offset="1" stop-color="${state.bg.bottom}"/>`);
  }
  state.waves.forEach((w, i) => {
    out.push(`    <linearGradient id="w${i}" ...>`);
    out.push(`      <stop offset="0" stop-color="${w.color}" .../>`);
  });
  // ...再拼波浪 path 的 d 字符串
}

这样导出的文件不依赖页面脚本，直接嵌入 HTML 或用设计软件打开都行。

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-svg-wave-generator

总结

波浪背景生成器把「好看」翻译成可计算的三个量：正弦参数、HSL 渐变、SVG 路径采样。控制点拖动表面是画图，实际一直在反算参数；导出则是把运行时状态重新刻成静态 SVG。后续可以继续加「更多图层混合模式」「竖版手机壁纸预设」「导出 PNG 位图」，或者把随机生成改成风格标签化，一键出夜景、日落、极光等成套底色。