动态波浪图：三角函数的艺术之美

2024-01-13 01:01:05

三角函数，作为数学中的重要工具，在各个领域都有着广泛的应用。在计算机图形学中，三角函数更是扮演着至关重要的角色，它可以用来构建出各种各样的动态效果。

本文将带领大家探索三角函数在构建水波图中的神奇魅力。我们将通过动态控制参数，创造出波浪升高的动画效果。文章详细介绍了实现过程，并提供了清晰的示例代码和实例，让您亲身体验三角函数的艺术之美。

三角函数构建水波图的原理

水波图的构建原理很简单，就是利用三角函数的正弦曲线来模拟水波的形状。正弦曲线的函数表达式为：

y = A * sin(Bx + C) + D

其中：

A：波浪的振幅，决定了波浪的高度。
B：波浪的波长，决定了波浪的长度。
C：波浪的相位，决定了波浪的起始位置。
D：波浪的偏移量，决定了波浪在y轴上的位置。

通过修改A、B、C、D这几个参数，我们可以得到不同的水波效果。

动态控制参数实现波浪升高的动画效果

现在，我们想做一个波浪升高的动画效果。根据三角函数的正弦曲线函数表达式，我们可以很轻松地实现这个效果。

只需要动态控制D的大小就可以了，水位最低时，D等于canvas的高度，也就是在canvas容器的最底部。

所以，我们得到一个很简单的公式：

D = canvas.height - t * v

其中：

canvas.height：canvas容器的高度。
t：当前帧的时间。
v：波浪升高的速度。

通过不断地改变t的值，就可以实现波浪升高的动画效果。

示例代码

// 创建canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置canvas的宽高
canvas.width = 500;
canvas.height = 300;

// 添加canvas到页面中
document.body.appendChild(canvas);

// 定义波浪的参数
const A = 50; // 波浪的振幅
const B = 0.1; // 波浪的波长
const C = 0; // 波浪的相位
const D = canvas.height; // 波浪的偏移量

// 定义波浪升高的速度
const v = 1;

// 定义当前帧的时间
let t = 0;

// 渲染函数
function render() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 动态控制波浪的偏移量
  D = canvas.height - t * v;

  // 绘制波浪
  ctx.beginPath();
  ctx.moveTo(0, D);
  for (let x = 0; x < canvas.width; x++) {
    const y = A * Math.sin(B * x + C) + D;
    ctx.lineTo(x, y);
  }
  ctx.stroke();

  // 更新当前帧的时间
  t += 0.01;

  // 请求下一次渲染
  requestAnimationFrame(render);
}

// 开始渲染
render();