Draw an arc
context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false);
參數一是圓心的x坐標值，參數二是圓心y軸坐標值，參數三是半徑，參數四是起始弧度，參數五十終止弧度，最后一個參數表示的繪制方向，默認的是false表示的是順時針的方向。如果是true表示的是逆時針方向。
注意了弧度制都是固定好了。如上圖所示
請看下面的一段程序
<!DOCTYPE html>
<html>
<head>
<title>canvas詳解</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
context.arc(100,100,50,0,1.5*Math.PI);
context.stroke();
</script>
</body>
</html>
結果顯示：
如果在context.arc(100,100,50,0,1.5*Math.PI,true);表示的是逆時針從0度到1.5PI處，結果如下圖
所以從上面的例子可以看出，弧度值是固定的，不是說順時針畫時就以順時針的方向來看，逆時針畫時就以逆時針的方向來看。這一點千萬要注意。
再來看一個程序
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.stroke();
}
結果顯示如下：
這時候大家會感到奇怪了，為什么畫出來的是一個封閉的圖形呢？
其實這是closePath另外一個作用了，當前我們繪制的路徑不是封閉的路徑時，closePath()會將自動路徑封閉。
如果這樣的話
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.stroke();
}
生成的就是一段段的弧，不會是封閉的了。
而且我們使用了beginPath(),canvas會知道我們是重新畫一條，如果給這幾條設置不同的屬性也是可以的。
接下來在看一個問題
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.fillStyle="red";
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.fill();
}
如果是這樣的話，結果會是填充的幾個弧形
，如果我們去掉了closePath(),結果也會是一樣的。
為什么呢？
因為如果調用了fill()的話，canvas會自動的找尋首尾然后將其連接起來，然后在填充。
canvas還有很對繪制接口，我將在下一張具體講解canvas的其他知識。