用Canvas实现动态波浪线背景的核心是正弦函数生成路径、requestAnimationFrame驱动动画、动态设置canvas像素尺寸确保清晰；需计算坐标、控制帧率、优化视觉，支持双层波浪、渐变描边、拖尾效果及响应式交互。
用 Canvas 实现动态波浪线背景，核心是用正弦函数生成平滑起伏的路径，再配合定时重绘形成流动感。关键不在画多复杂，而在于坐标计算、帧刷新节奏和视觉优化这三点。
基础结构与上下文准备
先在 HTML 中声明一个全屏或指定区域的 canvas 元素，并确保它能随窗口缩放：
- HTML 中写：
<canvas id="waveBg"></canvas> - CSS 设置宽高为 100% 并清除默认边距，例如：
canvas { display: block; width: 100%; height: 100%; } - JavaScript 中获取上下文：
const canvas = document.getElementById('waveBg'); const ctx = canvas.getContext('2d'); - 注意：必须在 JS 中动态设置 canvas 的 实际像素尺寸（而非 CSS 尺寸），否则会模糊。可监听
resize事件并执行：canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight;
波浪路径绘制逻辑
波浪本质是一条由正弦曲线采样点连成的折线。每帧更新时，横坐标固定步进，纵坐标由 sin(x + offset) 动态计算：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 定义参数：振幅（
amplitude）、波长（影响频率，如waveLength = 100）、偏移量（offset，随时间递增） - 遍历画布宽度，按固定间隔（如每 5 像素）取一个 x 坐标，对应 y =
centerY + amplitude * Math.sin((x + offset) * (2 * Math.PI / waveLength)) - 用
ctx.beginPath()→moveTo起点 → 循环lineTo各点 →stroke()绘出线条 - 若要双层波浪（常见视觉效果），只需重复该逻辑，改用不同振幅、波长和偏移速度即可
动画循环与性能控制
避免用 setInterval，优先使用 requestAnimationFrame 实现流畅且省电的动画：
- 写一个
animate()函数，在内部更新offset += speed，然后重绘波浪路径 - 调用
requestAnimationFrame(animate)启动循环；浏览器会按屏幕刷新率（通常 60fps）自动调度 - 每次重绘前务必清空画布：
ctx.clearRect(0, 0, canvas.width, canvas.height)，但不要清得太“暴力”——如果背景色单一，也可只重绘波浪区域或用globalCompositeOperation = 'destination-over'优化 - 可加入简单节流：比如只在
offset变化超过 0.1 时才重绘，减少无谓计算
增强视觉效果的小技巧
纯线条容易单薄，加些细节立刻提升质感：
-
描边渐变：创建线性渐变对象
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);，添加多个色标（如浅蓝→深蓝），再赋给ctx.strokeStyle = gradient -
透明度叠加：把上一帧波浪以低透明度（如
ctx.globalAlpha = 0.1）残留几帧，能自然形成运动拖尾感 -
响应式振幅：监听鼠标滚轮或触控板，动态调整
amplitude值，让交互有反馈 -
遮罩裁剪：若用于圆形/弧形区域，可用
ctx.arc()定义路径后调用ctx.clip()，再画波浪，就能得到“球内波浪”或“进度环”效果
