用canvas实现波浪

要在canvas上实现波浪效果，可以使用正弦函数来模拟波浪的形状，在每一帧中更新波浪的位置和形状，最终绘制出波浪的效果。以下是一个简单的示例代码：

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

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 波浪参数
const amplitude = 50;
const frequency = 0.01;
const speed = 0.1;
let phase = 0;

function draw() {
  // 清空画布
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制波浪
  context.beginPath();
  context.moveTo(0, canvas.height / 2);
  for (let x = 0; x < canvas.width; x++) {
    const y = canvas.height / 2 + amplitude * Math.sin(phase + frequency * x);
    context.lineTo(x, y);
  }
  context.lineTo(canvas.width, canvas.height);
  context.lineTo(0, canvas.height);
  context.closePath();
  context.fillStyle = '#0088aa';
  context.fill();

  // 更新波浪参数
  phase += speed;

  // 在下一帧绘制
  requestAnimationFrame(draw);
}

// 开始绘制
draw();

在这个示例中，首先设置了画布的大小，并定义了三个参数：振幅（amplitude）、频率（frequency）和速度（speed）。然后在 `draw` 函数中，使用正弦函数来计算每个点的纵坐标，从而绘制出波浪的形状。在更新完波浪参数之后，使用 `requestAnimationFrame` 函数来在下一帧绘制波浪。最终得到的效果如下图所示：