与贝塞尔曲线结缘，再次了解，再次归来，Canvas之旅（五）

前端

2023-11-27 23:28:14

绘制灵动的波浪：掌握贝塞尔曲线，释放你的创造力

踏入 Canvas 波浪绘制的奇妙世界，贝塞尔曲线如同一根魔术棒，解锁了创造复杂曲线形状的无限可能。本文将带你踏上一段逐浪前行的旅程，探索波纹奥秘，教你绘制灵动的波浪，让你的作品展现大海的律动之美。

贝塞尔曲线：波浪的基石

贝塞尔曲线，以它的发现者皮埃尔·贝塞尔（Pierre Bézier）命名，是一种强大的数学工具，能够描绘出各种各样的曲线形状。在绘制波浪时，三次贝塞尔曲线扮演着至关重要的角色，它由四个控制点定义：起始点、结束点、控制点 1 和控制点 2。

起始点和结束点决定了波浪的起点和终点，而控制点 1 和 2 则控制着曲线的形状。通过调整这些控制点的坐标，你可以塑造出千变万化的波浪形态。

逐浪前行：揭开波纹奥秘

在 Canvas 中绘制波纹，核心就在于操控控制点的坐标。控制点的位置决定了波浪的形状、速度和幅度。通过不断改变控制点的坐标，就能让波浪灵动起来，宛若海面上的精灵。

1. 波浪的形状

控制点 1 和 2 决定了波浪的弯曲程度。向外移动控制点会让波浪更加弯曲，向内移动则会让波浪变得平缓。通过微调控制点的坐标，你可以创造出从圆润柔和到尖锐锋利的各种波浪形状。

2. 波浪的速度

控制点移动的速度决定了波浪的运动速度。移动得越快，波浪就会流动得越快，反之亦然。利用这个特性，你可以控制波浪的节奏，营造出或舒缓宁静，或激昂澎湃的海洋氛围。

3. 波浪的幅度

控制点移动的距离决定了波浪的幅度。移动得越远，波浪就会越高，移动得越近，波浪就会越低。通过调整控制点的移动距离，你可以营造出从微微涟漪到惊涛骇浪的各种波浪效果。

绘制你的灵动波浪：释放你的创造力

掌握了贝塞尔曲线的使用技巧，你就可以挥洒创意，绘制属于你自己的灵动波浪了。在实际应用中，可以根据自己的需求调整控制点的坐标，创造出千姿百态的波浪形状。

除了波浪，贝塞尔曲线还能绘制圆形、椭圆形、矩形等各种形状。通过组合使用不同的形状，你可以构建出更加复杂的图形，让你的作品更加丰富多彩。

让波浪活起来：探索动态波浪的奥秘

静态波浪固然美丽，但动态波浪更能展现海洋的灵动之美。通过控制控制点的坐标变化，你可以实现波浪的移动、变形等效果，让你的作品充满生命力。

1. 波浪的移动方向

控制点移动的方向决定了波浪的运动方向。向右移动控制点，波浪就会向右流动，向左移动控制点，波浪就会向左流动。利用这个特性，你可以让波浪在画布上自由游动，营造出波光粼粼的效果。

2. 波浪的移动速度

控制点移动的速度决定了波浪的移动速度。移动得越快，波浪就会流动得越快，反之亦然。通过控制控制点的移动速度，你可以让波浪在画布上疾驰或缓慢漂浮，展现出不同的视觉效果。

3. 波浪的变形

控制点移动的距离决定了波浪的变形程度。移动得越远，波浪就会变形得越厉害，移动得越近，波浪就会保持得越稳定。利用这个特性，你可以让波浪在画布上扭曲、变形，营造出波涛汹涌或波光潋滟的视觉效果。

代码示例：绘制动态波浪

// 定义画布和画笔
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置波浪参数
const waveLength = 100; // 波浪长度
const waveAmplitude = 50; // 波浪振幅
const waveSpeed = 0.05; // 波浪速度

// 控制点坐标
let controlPoint1 = { x: 0, y: 0 };
let controlPoint2 = { x: 0, y: 0 };

// 绘制波浪
function drawWave() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算贝塞尔曲线的控制点
  controlPoint1.x += waveSpeed;
  controlPoint1.y = waveAmplitude * Math.sin(controlPoint1.x / waveLength);
  controlPoint2.x = controlPoint1.x + waveLength / 2;
  controlPoint2.y = waveAmplitude * Math.sin(controlPoint2.x / waveLength);

  // 绘制贝塞尔曲线
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);
  ctx.bezierCurveTo(controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y, canvas.width, canvas.height / 2);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  ctx.closePath();
  ctx.fillStyle = "#0000ff";
  ctx.fill();

  // 循环绘制波浪
  requestAnimationFrame(drawWave);
}

// 开始绘制波浪
drawWave();