Canvas动态波浪频谱通过AnalyserNode获取FFT数据，用正弦函数将低中高频能量映射为位移扰动，结合平滑处理、抗锯齿描边与渐变色等技巧实现自然律动。
用 Canvas 绘制带动态波浪效果的实时音频频谱，核心是把音频的频域数据（如 FFT 结果）映射为正弦波的振幅扰动，再逐帧绘制波动曲线。它不是简单画几条线，而是让频谱“活起来”——低频推着波峰前移，中频让波形上下起伏，高频带来细密抖动。关键不在炫技，而在数据驱动的自然律动。
获取并处理频谱数据
频谱数据来自 Web Audio API 的 AnalyserNode，它输出的是按频率分段的能量值数组（Uint8Array），长度由 fftSize 决定（常用 256、512 或 1024）。你需要：
- 设置
analyser.fftSize = 512，此时analyser.frequencyBinCount为 256，即有 256 个频率区间 - 调用
analyser.getByteFrequencyData(freqData)每帧读取一次数据，freqData是预先分配好的数组 - 可对原始数据做平滑处理（如指数加权平均）避免跳变，例如：
smoothed[i] = smoothed[i] * 0.7 + freqData[i] * 0.3
用正弦函数生成波浪基线
所谓“波浪效果”，本质是将每个频率段的能量转化为对应位置的垂直位移。常见做法是：把 256 个频点均匀分布到 Canvas 宽度上，对每个 x 坐标，叠加多个正弦项：
- 低频（0–32）控制整体波形周期和左右平移，比如
offsetX = Math.sin(time * 0.3) * 20 - 中频（32–128）主导主波峰高度，如
y += Math.sin(x * 0.02 + time) * (freqData[i] / 255 * 40) - 高频（128–256）添加微小抖动，可用
Math.sin(x * 0.1 + time * 5) * (freqData[i] / 255 * 3)
Canvas 渲染与动画循环
每一帧需清空画布、计算波形点列、描边绘制。注意性能细节：
立即学习“前端免费学习笔记（深入）”；
- 使用
requestAnimationFrame驱动循环，不依赖setTimeout - 绘制前调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，避免残留 - 用
ctx.beginPath()→ctx.moveTo()→ 多次ctx.lineTo()→ctx.stroke()，比逐点fillRect更高效 - 可启用抗锯齿：
ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 2;
增强视觉表现力的小技巧
纯线条容易单调，加一点变化就能提升质感：
- 颜色随能量渐变：用
ctx.strokeStyle = `hsl(${180 - freqData[i]}, 80%, 60%)`让低频偏青、高频偏红 - 双层波形：底层画半透明粗线表示平均能量趋势，上层画实色细线表现瞬时波动
- 添加衰减尾迹：在清空画布前，用半透明黑色覆盖全画布（
ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(...)），制造余韵感
