canvas 如何仿写贝塞尔曲线

一、什么是贝塞尔曲线

贝塞尔曲线（Bézier Curve） 是一种数学上定义良好的曲线，广泛应用于计算机图形和相关领域。它能够创建平滑、可按控制点任意形状转变的曲线路径。贝塞尔曲线可分为线性、二次和三次等类型。

贝塞尔曲线最重要的特性是可以通过控制点来调整曲线的形状。这使得它在矢量图形设计中尤为重要。而在Canvas中绘制贝塞尔曲线则主要依赖 quadraticCurveTo 和 bezierCurveTo 这两个方法来实现二次和三次贝塞尔曲线。

二、Canvas基础和环境搭建

CANVAS的基本概念

Canvas是HTML5新增的元素，它提供了一个用于通过JavaScript和HTML的<canvas>标签来绘制图形的方式。Canvas能够让我们绘制出如线条、矩形、圆形以及贝塞尔曲线等复杂图形。

环境搭建

要在网页中使用Canvas，你首先需要在HTML文档中插入<canvas>元素，并通过JavaScript来获取这个画布并进行绘制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贝塞尔曲线演示</title>
</head>
<body>
    <canvas id="bezier-canvas" width="800" height="600"></canvas>
    <script src="js/bezier.js"></script>
</body>
</html>

在JavaScript文件bezier.js中，我们首先获取到这个Canvas元素，并设置上下文：

const canvas = document.getElementById('bezier-canvas');
const ctx = canvas.getContext('2d');

三、绘制线性贝塞尔曲线

线性贝塞尔曲线概念

线性贝塞尔曲线 是最简单的贝塞尔曲线，它基本上是一条直线，通过两个点来定义。虽然在实际使用中不常称其为贝塞尔曲线，但理解它是理解更高阶贝塞尔曲线的基础。

绘制线性贝塞尔曲线

绘制线性贝塞尔曲线相当于在Canvas中绘制一个简单的直线段。这里使用的是 moveTo() 和 lineTo() 方法来指定线段的起点和终点：

ctx.beginPath();
ctx.moveTo(100, 100); // 起点
ctx.lineTo(200, 200); // 终点
ctx.stroke();

通过上述代码，Canvas上就会展示一条从坐标(100, 100)到(200, 200)的直线。

四、绘制二次贝塞尔曲线

二次贝塞尔曲线概念

二次贝塞尔曲线需要三个点来定义：起点、控制点和终点。曲线的形状由这个控制点来操控，起点和终点则表示曲线的开始和结束位置。

绘制二次贝塞尔曲线

在Canvas中，要绘制二次贝塞尔曲线，我们可以使用 quadraticCurveTo() 方法。该方法需要传入四个参数，分别是控制点的x与y坐标、终点的x与y坐标：

ctx.beginPath();
ctx.moveTo(100, 250); // 起点
// 控制点为(150, 100)，终点为(200, 250)
ctx.quadraticCurveTo(150, 100, 200, 250);
ctx.stroke();

这条命令会画出一条起始于(100, 250)、通过控制点(150, 100)并结束于(200, 250)的光滑曲线。

五、绘制三次贝塞尔曲线

三次贝塞尔曲线概念

三次贝塞尔曲线比二次贝塞尔曲线更为复杂，它由四个点定义：起点、两个独立的控制点和终点。这两个控制点给予了三次贝塞尔曲线更高的灵活性和复杂度。

绘制三次贝塞尔曲线

bezierCurveTo() 方法用于在Canvas中绘制三次贝塞尔曲线。需要六个参数，代表两个控制点和一个终点的坐标：

ctx.beginPath();
ctx.moveTo(100, 400); // 起点
// 第一个控制点为(200, 300)，第二个控制点为(300, 500)，终点为(400, 400)
ctx.bezierCurveTo(200, 300, 300, 500, 400, 400);
ctx.stroke();

以上代码绘制了一条起始于(100, 400)、通过两个控制点(200, 300)及(300, 500)、并且结束于(400, 400)的三次贝塞尔曲线。

六、贝塞尔曲线的应用实例

贝塞尔曲线在图形设计和动画制作中应用广泛，例如在制作平滑的动画过渡效果，或者在矢量图形编辑器中定义复杂的路径等场景。我们不仅可以使用Canvas提供的API来手动绘制这些曲线，通过计算和定义自己的贝塞尔曲线方程，还可以创建出更加个性化的图形和动画效果。

实例：动画路径绘制

举例来说，我们可以使用贝塞尔曲线来给动画对象指定一个运动路径。以下是一个简单的动画实例，使用三次贝塞尔曲线让一个小球沿着指定的路径移动：

let t = 0; // 参数t，代表当前动画的时刻
const animate = () => {
    if (t > 1) return; // 如果动画完成则不再继续进行
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    // 重新绘制曲线路径
    ctx.beginPath();
    ctx.moveTo(100, 400);
    ctx.bezierCurveTo(200, 300, 300, 500, 400, 400);
    ctx.stroke();
    // 计算小球当前的位置
    const x = Math.pow(1 - t, 3) * 100 + 3 * t * Math.pow(1 - t, 2) * 200 + 3 * Math.pow(t, 2) * (1 - t) * 300 + Math.pow(t, 3) * 400;
    const y = Math.pow(1 - t, 3) * 400 + 3 * t * Math.pow(1 - t, 2) * 300 + 3 * Math.pow(t, 2) * (1 - t) * 500 + Math.pow(t, 3) * 400;
    // 绘制小球
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, Math.PI * 2);
    ctx.fill();
    // 更新参数t
    t += 0.01;
    requestAnimationFrame(animate); // 请求下一帧动画
};
animate(); // 开始动画

七、贝塞尔曲线的数学原理

贝塞尔曲线是通过数学方程来定义的，在其背后是利用了多项式和组合数学上的贝塞尔公式。了解其数学原理，可以帮助我们更好地理解曲线的形成和控制方法。

数学方程

例如，三次贝塞尔曲线的数学表达是由Bernstein多项式组成的，它是关于t的三次多项式，其中t是从0到1的参数：

B(t) = (1-t)^3 * P0 + 3*(1-t)^2 * t * P1 + 3*(1-t) * t^2 * P2 + t^3 * P3

其中，P0、P1、P2和P3分别是起点、两个控制点和终点的坐标。

贝塞尔曲线的这种定义方式确保了曲线的平滑连续，同时保留了通过改变控制点来控制曲线形状的灵活性。每个控制点在曲线形成中都有一定的“权重”，这些“权重”随参数t的变化而变化，最终形成平滑且连贯的路径。

八、贝塞尔曲线的高级应用

在熟悉了贝塞尔曲线的基础绘制方法之后，我们可以进一步探索其在现实世界应用中的高级技术，如路径动画、形状变换、字体渲染等方面的应用。

形状变换

通过动态调整贝塞尔曲线的控制点，可以实现形状的平滑变换。例如，在一个图形编辑器中，用户可以通过拖动贝塞尔曲线的控制点来实时编辑图形的形状，从而创造出各种复杂的设计元素。

路径动画

与前面动画示例类似，但通过实现更为复杂的控制机制，我们可以创造出更加丰富和细腻的动画效果。例如，一个物体可以沿着精心设计的贝塞尔曲线路径，模拟真实世界中的物理运动，比如模拟重力弹跳、风的摆动等自然现象。

字体渲染

贝塞尔曲线在字体设计和渲染中也占有一席之地。矢量字体技术中，每个字符通过贝塞尔曲线定义，以确保不同大小渲染时的清晰度和准确性。

九、总结

通过学习贝塞尔曲线的基础和各种应用，我们可以看到，贝塞尔曲线是设计和图形编程中极为强大的工具。掌握了如何在Canvas中仿写贝塞尔曲线，就能够在Web开发中创建出各种视觉效果，无论是简单的图形还是复杂的动画。通过不断实践和创新，我们可以将这些技术运用到更多富有创造性的项目中，创作出独一无二的艺术作品。