Canvas 曲线绘制

Canvas 曲线绘制有四种方式：arc()、arcTo ()、quadraticCurveTo()、bezierCurveTo()。

1. arc()

context.arc ( centerx,centery ,radius ,startingAngle ,endingAngle ,anticlockwise = false)
参数：
- centerx,centery：圆点坐标(x,y)
- radius：半径
- startingAngle：起始弧度
- endingAngle：结束弧度
- anticlockwise：可选参数，FALSE表示顺时针，TRUE表示逆时针，默认为FALSE
Canvas 曲线绘制

2. arcTo ()

arcTo ( x1 ,y1 ,x2 ,y2 ,radius )
传入两点的坐标以及一个圆弧的半径，( x1 ,y1)为一个控制点，(x2 ,y2)为一个终止点。
使用方法：
首先要使用moveTo(x0,y0)移动到一个初始点的位置 context.moveTo(x0,y0)；
使用arcTo ()指定控制点、结束点以及半径context.arcTo(x1 ,y1 ,x2 ,y2 ,radius);
arcTo ()绘图原理：
arcTo()将当前点坐标，即moveTo()或lineTo()等之后所在的点坐标作为(x0 ,y0)的位置，之后开发者传入参数x1 ,y1 ,x2 ,y2后将会形成一个有两个线段组成的折线，arcTo()将从(x0 ,y0)开始绘制一条弧线，这条弧线与这两条折线相切，并且其圆弧的半径为radius。弧线的绘制起始点为(x0 ,y0)，但(x0 ,y0)不一定是一个切点，它将在(x0 ,y0)和(x1 ,y1)连成的线段上寻找一个切点，找到切点后才开始绘制圆弧。但结束点不一定是(x2 ,y2)，而是与(x1 ,y1)和(x2 ,y2)连成的线段相切的点。
Canvas 曲线绘制
若弧线切点不在(x0 ,y0)和(x1 ,y1)连成的线段上，而是在其延长线上，弧线将往反方向寻找切点。

3. 贝塞尔曲线（Bezier）

使用方式：
首先用moveTo()指定初始点坐标 context.moveTo(x0,y0);
使用quadraticCurveTo()指定控制点和结束点context.quadraticCurveTo(x1,y1,x2,y2);
和arcTo()不同的是(x0,y0)就是曲线的起始点，(x2,y2)就是曲线的结束点。
可以通过下面这个页面查看贝塞尔曲线的效果：
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

4. 贝塞尔三次曲线

使用方式：
首先用moveTo()指定初始点坐标context.moveTo(x0,y0);
使用bezierCurveTo()指定两个控制点和一个结束点context.bezierCurveTo(x1,y1,x2,y2,x3,y3);
可以通过下面这个页面查看贝塞尔曲线的效果：
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html