canvas绘制 动态波形图

要绘制动态波形图，你可以使用 HTML5 的 Canvas 元素和 JavaScript，以下是一个简单的示例：

HTML 代码：

<canvas id="canvas"></canvas>

JavaScript 代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const center = height / 2;

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(0, center);
ctx.lineTo(width, center);
ctx.stroke();

// 初始化波形参数
let speed = 10;
let frequency = 0.03;
let amplitude = 50;
let phase = 0;

// 绘制波形
ctx.beginPath();
for (let x = 0; x < width; x++) {
  const y = center + Math.sin(phase + x * frequency) * amplitude;
  ctx.lineTo(x, y);
}
ctx.stroke();

// 动态更新波形
function update() {
  phase += speed / 100;
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  for (let x = 0; x < width; x++) {
    const y = center + Math.sin(phase + x * frequency) * amplitude;
    ctx.lineTo(x, y);
  }
  ctx.stroke();
  requestAnimationFrame(update);
}

update();

在这个示例中，我们首先获取 Canvas 元素和 2D 上下文对象，然后定义一些波形参数，包括速度、频率、振幅和相位。然后我们绘制了一个简单的坐标轴，并使用 Math.sin 函数计算每个像素的 y 坐标，绘制出一个静态的波形。最后，我们使用 requestAnimationFrame 函数动态更新波形，实现波形的动态效果。

你可以根据自己的需要调整参数，以及添加其他的特效和交互。