在canvas中有一个非常有用的路劲类型： 。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y结束点。

quadraticCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线，cp1x,cp1y控制点一，cp2x,cp2y为控制点二，x,y为结束点。

图中分别描述了二次贝塞尔曲线和三次贝塞尔曲线的实例，红色点表示控制点，蓝色点表示结束点，二次贝塞尔曲线有一个控制点和一个结束点，三次贝塞尔曲线有两个控制点和一个结束点。

下面画个对话框（二次贝赛尔曲线）

function draw() {  var canvas = document.getElementById('canvas');  if (canvas.getContext) {    var ctx = canvas.getContext('2d');    ctx.beginPath();    ctx.moveTo(75,25);    ctx.quadraticCurveTo(25,25,25,62.5);    ctx.quadraticCurveTo(25,100,50,100);    ctx.quadraticCurveTo(50,120,30,125);    ctx.quadraticCurveTo(60,120,65,100);    ctx.quadraticCurveTo(125,100,125,62.5);    ctx.quadraticCurveTo(125,25,75,25);    ctx.stroke();  }}

效果图：

再来个稍微复杂点的（三次贝赛尔曲线）

function draw() {  var canvas = document.getElementById('canvas');  if (canvas.getContext){    var ctx = canvas.getContext('2d');    ctx.beginPath();    ctx.moveTo(75,40);    ctx.bezierCurveTo(75,37,70,25,50,25);    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);    ctx.bezierCurveTo(20,80,40,102,75,120);    ctx.bezierCurveTo(110,102,130,80,130,62.5);    ctx.bezierCurveTo(130,62.5,130,25,100,25);    ctx.bezierCurveTo(85,25,75,37,75,40);    ctx.fill();  }}

效果图：

感觉这东西就是计算的时候比较费劲，但确实能画出很多复杂的东西，一点一点调整。