之前，我写了一个arc函数的用法：.

arcTo:

cxt.arcTo( cx, cy, x2, y2, 半径 )

cx,cy表示控制点的坐标，x2,y2表示结束点的坐标，如果我们想画一条弧线，需要提供3个坐标，开始点，控制点和结束点. 开始点一般可以通过moveTo或者lineTo提供.arcTo提供控制点和结束点.

1 10 28 29 30     
     31 

加大半径( 其他代码保持不变，半径调成100 ）弧度将会变大!

oGc.arcTo( cx, cy, x2, y2, 100 );

如果调整结束点，把结束点与控制点形成一个直角，那么弧度将不会这么弯曲

1 var x1 = 50, 2             y1 = 100, 3             cx = 500, 4             cy = 100, 5             x2 = 500, 6             y2 = 200; 7         oGc.lineWidth = '2px'; 8         oGc.strokeStyle = 'red'; 9         oGc.moveTo( x1, y1 );10         oGc.arcTo( cx, cy, x2, y2, 100 );11         oGc.stroke();

如果把开始点的横坐标放大，半径也放大，那么得到的形状是这样的!

1 var x1 = 400, 2     y1 = 100, 3     cx = 500, 4     cy = 100, 5     x2 = 500, 6     y2 = 200; 7 oGc.lineWidth = '2px'; 8 oGc.strokeStyle = 'red'; 9 oGc.moveTo( x1, y1 );10 oGc.arcTo( cx, cy, x2, y2, 300 );11 oGc.stroke();

看到这些形状，你知道他能用在哪些地方吗？

贝塞尔曲线：

如果你初次了解贝塞尔曲线，这里有一篇非常不错的文章可以参考下:

再来一个工具，这个工具提供了canvas中贝塞尔曲线的开始点，控制点与结束点的坐标：

canvas二次贝塞尔曲线的函数语法：

cxt.quadraticCurveTo( cx, cy, x2, y2 );

cx,cy控制点坐标，x2,y2:结束点坐标, 开始点一般由moveTo, lineTo提供.

画一个二次贝塞尔曲线：

1  9 20 21 22     
      23 

    

三次贝塞尔曲线

canvas三次贝塞尔曲线的函数语法：

cxt.bezierCurveTo( cx1, cy1, cx2, cy2, x2, y2 );

cx1,cx2 表示第一个控制点，cx2,cy2表示第二个控制点，x2, y2表示结束点坐标。开始点一般由moveTo, lineTo提供.

画一个三次贝塞尔曲线：

1  9 20 21 22     
      23 

     

画一个饼图：

1  9 36 37 38     
      39 

画一个圆角矩形：

1  9 31 32 33     
      34