Canvas动态波形绘制核心是用三角函数生成周期性骨架，结合数组数据映射实现可交互实时可视化，并通过requestAnimationFrame、局部更新与归一化等优化确保流畅高性能渲染。
Canvas 绘制动态波形，核心在于用三角函数生成平滑、可预测的周期性变化，再结合数组数据实现可扩展、可交互的实时可视化。它不是简单画一条 sin 曲线，而是让波形能随时间流动、响应数据输入、适配不同坐标系，并保持高性能渲染。
用三角函数生成基础波形
sin 和 cos 是最常用的波形源，因为它们天然具备连续、有界、周期性三大特性。典型表达式为：y = A * Math.sin(w * x + φ) + h
其中：
-
A是振幅，控制上下波动幅度 -
w（角频率）决定波长，w = 2π / T，T 越小波越密 -
φ（相位）是时间偏移量，动画靠它递增实现“流动” -
h是垂直偏移，在 Canvas 中对应 y 轴基准线（注意：Canvas 坐标原点在左上，所以h实际是向下平移）
绘图时不要逐点 lineTo(x, y) 连接——虽然可行，但密度低时锯齿明显。推荐等距采样（如每 2px 一个点），x 从 0 到 canvas.width 步进，y 按公式实时计算。记得提前做 y 坐标翻转：pixelY = height - y 或直接在公式中用 height - (A * sin(...) + h)。
把数组数据映射成波形形状
当波形需反映真实数据（如音频频谱、传感器读数），不能只靠纯数学函数。此时应将数组视为“幅度序列”，用它动态调制三角函数的参数：
- 把数组每个值当作局部振幅
A[i]，用于生成第 i 段波形 - 或将数组作为相位偏移
φ[i]，让波形在不同位置“扭曲”出数据特征 - 更常见的是用数组长度控制波形密度，数值大小控制高度起伏（即
y = baseY + dataArray[i] * scale）
关键前提是归一化：原始数据可能范围是 [0, 4096] 或 [-120, 30]，必须缩放到 [0, 1] 或 [-1, 1] 再参与计算，否则会溢出画布或压扁成一条线。可用公式：normalized = (value - min) / (max - min)
务必先遍历数组算出 min 和 max，并过滤 NaN、Infinity。
实现流畅的动态更新效果
每帧重绘整条波形会导致闪烁和性能浪费。高效做法是：
- 使用
requestAnimationFrame驱动循环，避免setInterval的时间漂移 - 每次只更新“新增部分”：例如波形向左滚动，就平移已有路径 + 在右侧插入新段
- 用
ctx.save()/ctx.restore()隔离变换状态，防止rotate、scale污染后续绘制 - 局部擦除：仅
clearRect()波形末端变化区域，而非全屏清空
若数据持续追加（如实时音频流），建议维护一个固定长度的双端队列（如 data.slice(-200)），每次 push 新值后 shift 旧值，保证视窗稳定，也利于插值平滑。
优化视觉与性能细节
- 线宽设为
1.5而非1或2，抗锯齿更自然；开启ctx.lineCap = 'round'避免端点毛刺 - 关闭
ctx.imageSmoothingEnabled = false可提升高频波形清晰度（尤其像素风场景） - 若需多层波形（如基波+谐波），分别绘制后用
globalAlpha控制透明度叠加 - 对高密度点（>1000 个），考虑降采样或使用
Path2D缓存路径对象，减少beginPath开销
本质上，三角函数提供骨架，数组数据赋予血肉，而 Canvas 渲染逻辑决定它是否真实可信。三者配合得当，就能做出既有数学精度又有视觉呼吸感的动态波形。
