Html5 canvas学习2-圆 贝塞尔曲线

1.画一个圆弧

arc(x,y,r,start,stop)

 参数分别为： 圆心x坐标, 圆心y坐标, 圆的半径r , 开始角度, 结束角度

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.arc( 80, 80, 40, 0, 2*Math.PI);

ctx.lineWidth = 3;  //描边宽度为3px
ctx.strokeStyle = "yellow";
ctx.stroke();  //描边
ctx.fillStyle = "#4DA6FF";
ctx.fill(); //填充颜色

正常是顺时针，角度是负值则逆时针

arcTo() 方法

ctx.arcTo( 起点切线末端x坐标, 起点切线末端y坐标, 终点x坐标, 终点y坐标, 圆的半径r );

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(20,20);
ctx.lineTo(60,20);
ctx.arcTo(100,20,100,60,40); // 创建圆弧路径
ctx.lineTo(100,100);
ctx.stroke();                
</script>

需要知道的是 arc() 不会影响画笔的位置，而 arcTo() 会把画笔移到圆弧线的终点位置。

贝塞尔曲线

贝塞尔曲线的绘制

bezierCurveTo()

它称作“三次方贝塞尔曲线”，其语法为：ctx.bezierCurveTo( CSx, CSy, CEx, CEy, Ex, Ey );
其中CSx、CSy表示贝塞尔曲线起点方向控制线末端的x坐标和y坐标。CEx、CEy表示贝塞尔曲线终点方向控制线末端的x坐标和y坐标。Ex、Ey表示贝塞尔曲线终点坐标。

参考图如下，图中的贝塞尔曲线起点坐标为（20,20），终点坐标为（200,20），起点的方向控制线末端坐标为（20,100），终点的方向控制线末端坐标为（200,100）：

起始点默认为bezierCurveTo()方法执行之前画笔所在的位置，我们可以通过ctx.moveTo(x,y)来确定起始点的位置。
如上图所示的贝塞尔曲线我们可以这样绘制：

<canvas id="myCanvas" width="300" height="150" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(20,20);   //确定起始点
ctx.bezierCurveTo( 20, 100, 200, 100, 200, 20 );
ctx.stroke();  //描边
</script>

绘制两条或者多条连在一起的贝塞尔曲线

<canvas id="myCanvas" width="400" height="250" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(20,120);   //确定起始点
ctx.bezierCurveTo( 20, 200, 200, 200, 200, 120 );   //绘制第一条贝塞尔曲线
ctx.bezierCurveTo( 200, 20, 380, 20, 380, 120 );  //绘制第二条贝塞尔曲线，该曲线起点为上一条曲线终点（200，120）
ctx.stroke();  //描边
</script>

quadraticCurveTo()

绘制一条起点不做方向控制的曲线，那么bezierCurveTo()方法就不再适用了。quadraticCurveTo可以解决，称作“二次方贝塞尔曲线”
语法为：ctx.quadraticCurveTo( CEx, CEy, Ex, Ey );
其中CEx、CEy表示曲线终点方向控制线末端的x坐标和y坐标。Ex、Ey表示曲线终点坐标。至于曲线起点则跟bezierCurveTo()一样，为该方法执行前画笔所在的位置。

<canvas id="myCanvas" width="490" height="270" style="border:solid 1px #CCC;">
您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(52,37);   //确定起始点
ctx.quadraticCurveTo( 45, 175, 172, 157 );   //绘制第一条曲线
ctx.bezierCurveTo( 298, 140, 337, 201, 312, 236 );  //绘制第二条曲线
ctx.stroke();  //描边
</script>

由于起点是没有方向控制线的，我们很容易知道得先绘制一条quadraticCurve，然后再紧接着绘制一条bezierCurve来完成这条曲线。

参考：http://www.runoob.com/html/html5-canvas.html
http://www.cnblogs.com/vajoy/p/3992852.html