绘制三次贝塞尔曲线

1. 前言

上一节我们学习了二次贝塞尔曲线，本节我们开始学习三次贝塞尔曲线。贝塞尔曲线都是由一个起点、一个终点和多个控制点组成。二次贝塞尔曲线有一个控制点，三次贝塞尔曲线有两个控制点，n 次贝塞尔曲线就有 n-1 个控制点。

三次贝塞尔曲线是一种三次曲线，它可以向两个方向弯曲，由四个点来定义：两个锚点及两个控制点，控制点用来控制曲线的形状。

我们先看一下三次贝塞尔曲线的绘制过程：

上图中 p1 和 p4 是两个锚点，p2 和 p3 是两个控制点。

在线工具

这里介绍一个开源的在线画贝塞尔曲线的工具，同学们可以体验一下：N阶贝塞尔曲线生成器

canvas 绘制三次贝塞尔曲线

在 canvas 中，绘制三次贝塞尔曲线和绘制二次贝塞尔曲线方法类似，只是比二次贝塞尔曲线多了一个控制点参数，具体绘制方法为：

ctx.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y);

先看整体案例：

运行结果：

这样我们就绘制了一条三次贝塞尔曲线。

本小节中我们使用到一个新的方法 bezierCurveTo()。

bezierCurveTo 方法作用是绘制一条三次贝塞尔曲线。

变量说明：

本小节我们主要学习了利用 bezierCurveTo 方法绘制一条三次贝塞尔曲线，这个方法有6个参数，分别是两个控制点和终点的坐标。