三次贝塞尔曲线和二次贝塞尔曲线本质上道理相通，前者仅是多一个控制点，因此本文的行文方式与介绍二次贝塞尔曲线的帖子是差不多的。

三次贝塞尔曲线需要四个点的坐标数据：曲线起始点坐标（x1,y1）、曲线第一个控制点坐标（cpx1,cpy1）、曲线第二个控制点坐标（cpx2,cpy2）和曲线终点坐标（x2,y2）。在 canvas 画布中，起始点坐标默认使用上一次绘制图形的路径终点坐标，若不存在路径终点坐标则起始点坐标为（0,0），也可通过 moveTo(x,y) 指令重新设定。在canvas画布中，绘制三次贝塞尔曲线有专门的指令，bezierCurveTo(cpx1, cpy1, cpx2, cpy2, endX, endY), 其中，cpx1 和 cpy1、cpx2 和 cpy2 分别为曲线两个控制点坐标，endX 和 endY 为曲线终点坐标，曲线起点坐标取上一回路径终点坐标或通过 moveTo(x,y) 指令定义。假设画笔标识为 ctx，我们来绘制一条三次贝塞尔曲线：

ctx.moveTo(50, 100);
ctx.bezierCurveTo(40, 5, 120, 0, 250, 100);

这表示，曲线从（50,100）出发，到（250，100）停车，曲线的第一个控制点是（40, 5)，第二个控制点是（120, 10），效果如下示例所示（小圆点用于标识四个点的位置）：

影响三次贝塞尔曲线的外观主要是控制点，上例中的两个小绿点就是两个控制点。控制点可以在曲线上，若此，绘制出来的将不是曲线而是一条直线；控制点可以为正负数、可以超出画布的范围，不同的数值将直接影响曲线的曲率和最终外观。

早些时候，各大浏览器只有Chrome较早支持绘制椭圆指令，为了兼容，大佬们经常使用三次贝塞尔曲线来绘制椭圆。现在我们可以直接使用 ellipse() 方法来实现椭圆的绘制了，不过重现一下用三次贝塞尔曲线画椭圆，对学习canvas画布绘制三次贝塞尔曲线还是有好处的。请看下面的绘制效果：

代码和解释如下：

【附】正统绘制椭圆效果和代码

效果：

代码和解释：