全文说到了三角形，圆形等相关图形的画法，不熟悉的同学可以出门右转，先看看前文，接下来继续我们的图形——曲线。

学过数学，或者是比较了解js 的同学都知道贝塞尔曲线，当然，在数学里面，这是一门高深的学问，js里面的贝塞尔曲线一般是用来做动画的，其实别的地方也有体现，比如说Photoshop里面的钢笔工具，CorelDraw里面的贝塞尔工具等等，canvas中，也是有体现的

当然，如果是单纯的画一条曲线，也可以用前面的方法：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.arc(100,100,100,0,90*Math.PI/180,false); ctx.stroke(); ctx.beginPath(); ctx.moveTo(103,103); ctx.arcTo(183,83,162,182,40); ctx.stroke();

如果要画一个弯弯曲曲的线条就费劲了，这才有下面的主角登场：

quadraticCurveTo(cpx,cpy,x,y)  二次贝塞尔曲线

参数：cpx,cpy 表示第一个控制点，x,y 表示结束点

加上起点，就是3个点控制一条曲线，其实这个跟arcTo的用法差不多，不同的地方就是arcTo是需要指定圆弧的半径的，因为它是2条线中画一个圆与直线的切点形成的曲线，那这个二次贝塞尔曲线的画图原理是什么呢？咱们一起来画一画：

二次贝塞尔曲线的大致规律：从起始点出发，曲线越靠近控制点，曲线越陡，然后慢慢远离控制点，曲线随即越来越平缓，直到结束点，并且此曲线会与起始点和结束点相切

这个控制点是不是有点像一个磁铁一样，吸引着这条曲线的运动，俗话说耳闻不如一见，咱们试一下：

ctx.moveTo(50,50); ctx.lineTo(70,120); ctx.lineTo(200,80); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50,50); ctx.quadraticCurveTo(70,120,200,80); ctx.stroke();

看看，是不是这样的，当然，曲线弯曲的程度是多少是有公式的，但是我们不需要关心，只需要记住一点就够了：曲线靠近控制点，曲线越陡，远离控制点，曲线越平，哦了！

再次提示一下，arcTo与quadraticCurveTo的区别，现在是否明白？

现在我们来介绍一下三次贝塞尔曲线：

bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)  三次贝塞尔曲线

参数：cpx1,cpy1表示第一个控制点，cpx2,cpy2表示第二个控制点  x,y表示结束点

包括起始点一起4个点来决定一条曲线，这个跟二次贝塞尔曲线的原理是一样一样的，只是多一个控制点，其精髓还是那句话：曲线靠近控制点，曲线越陡，远离控制点，曲线越平

先来一个简单的例子吧（来个U形）：

ctx.moveTo(20,20); ctx.bezierCurveTo(20,100,200,100,200,20); ctx.stroke();

如上图，第一张是效果图，第二张是原理图，曲线从起始点开始，下方有一个控制点，则曲线越陡，到第二个控制点与曲线的切线的点的位置，因为受2个控制点的影响，曲线开始慢慢变平缓，因为2控制点刚好对称，所以到中间点，曲线出于水平，然后继续受2个控制点的作用，其中第二个控制点的作用越来越大，知道第一个控制点与曲线的切线点位置，曲线继续受到第二个控制点的作用，反向受力，到结束点，额，听不懂，好吧，不懂就不懂吧，记住那句总结性的话就行了！

其经典例子莫过于正弦图（用2个贝塞尔曲线，一个正U一个反U）：

ctx.beginPath(); ctx.moveTo(20,150); ctx.bezierCurveTo(20,50,150,50,150,150); ctx.stroke(); ctx.beginPath(); ctx.moveTo(150,150); ctx.bezierCurveTo(150,250,280,250,280,150); ctx.stroke();

当然，三次贝塞尔曲线不知道能画U形图，而是任意曲线都能画，只有你想不到，没有画不了的，哈哈，脑洞打大一下吧！