水波图：绘制出优美的水波纹，赋予项目独特魅力

2023-11-13 08:49:32

波浪之源：正余弦曲线

当我们观察水波时，会发现它们呈现出一种有规律的起伏。这种起伏正是由正余弦曲线所描绘出来的。正余弦曲线是一种周期性函数，它能够完美地刻画波浪的波峰和波谷。

正余弦曲线的公式分别为：

y = A * sin(ωt + φ)
y = A * cos(ωt + φ)

其中，

A 表示波浪的振幅，即波浪的最高点和最低点之间的距离。
ω 表示角速度，即波浪在单位时间内旋转的弧度。
t 表示时间。
φ 表示相位角，即波浪在时间 t = 0 时的位置。

通过改变这些参数，我们可以创造出各种各样的波浪。

构建水波图：Canvas 与 JavaScript

掌握了正余弦曲线的原理后，我们就可以开始构建水波图了。我们将使用 Canvas 和 JavaScript 来实现这一目标。

Canvas 是一种 HTML5 元素，它允许我们在网页上绘制图形和动画。JavaScript 则是一种编程语言，它可以操纵 HTML 元素并实现交互功能。

首先，我们需要创建一个 Canvas 元素。我们可以使用以下代码：

<canvas id="myCanvas" width="600" height="400"></canvas>

然后，我们需要获取 Canvas 的上下文对象。上下文对象允许我们在 Canvas 上进行绘图。我们可以使用以下代码获取上下文对象：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

接下来，我们需要使用 JavaScript 来绘制水波图。我们可以使用以下代码绘制一个简单的正余弦曲线：

ctx.beginPath();
ctx.moveTo(0, 200);
for (let i = 0; i < 600; i++) {
  const x = i;
  const y = 200 + 100 * Math.sin(0.01 * i);
  ctx.lineTo(x, y);
}
ctx.stroke();

这段代码会创建一个正余弦曲线，波峰和波谷相隔 100 像素，波长为 600 像素。

动画：让水波动起来

现在，我们已经掌握了如何绘制正余弦曲线。接下来，我们需要让水波动起来。我们可以使用 JavaScript 中的 requestAnimationFrame() 方法来实现动画效果。requestAnimationFrame() 方法会不断地调用一个回调函数，在这个回调函数中，我们可以更新水波的位置和形状。

我们可以使用以下代码来实现水波动画：

function animate() {
  ctx.clearRect(0, 0, 600, 400);

  ctx.beginPath();
  ctx.moveTo(0, 200);
  for (let i = 0; i < 600; i++) {
    const x = i;
    const y = 200 + 100 * Math.sin(0.01 * i + frameCount / 100);
    ctx.lineTo(x, y);
  }
  ctx.stroke();

  frameCount++;

  requestAnimationFrame(animate);
}

animate();