利用context的方法，進行圓和弧的繪制
context.arc(x,y,radius,startingAngle,endingAngle,anticlockwise);
x，y:表示圓心坐標
radius：圓的半徑
startingAngle：繪制圓弧的起始位置（弧度制，比如0，0.5*Math.PI.....）
endingAngle:繪制圓弧的終止位置
anticlockwise：false和true，true表示逆時針，false表示順時針。不寫默認false
和繪制直線一樣，你可以把繪制圓看成是直線的繪制，只是這個直線比較特殊，是有弧度的直線
1.如圖繪制圓心（0,10）半徑100，從0π到0.5π順時針繪制一段圓弧
context.strokeStyle='red'; context.arc(0,10,100,0,0.5*Math.PI); context.stroke();
2.如圖繪制圓心（110,110）半徑100，從0π到0.5π逆時針繪制一段圓弧
context.strokeStyle='red'; context.arc(110,110,100,0,0.5*Math.PI,true); context.stroke();
3.和繪制直線一樣，.context.fill();默認會把首位相連，在填充上顏色
1 context.strokeStyle='black'; 2 context.lineWidth=5; 3 context.arc(110,110,100,0,0.5*Math.PI,true); 4 context.fillStyle="red"; 5 context.fill(); 6 context.stroke();
4.可以不需要繪制context.stroke()，直接填充顏色，只是沒有了邊界
5. beginPath();closePath(); 使得路徑首位相連
beginPath（）： 標志開始一個路徑
closePath（）；表中結束一個路徑，如果沒有首位相連，則連起來
1 context.strokeStyle='black'; 2 context.lineWidth=5; 3 context.beginPath(); 4 context.arc(110,110,100,0,0.5*Math.PI,true); 5 context.closePath(); 6 context.stroke();
6.closePath()可以不寫，不影響狀態的鎖定，不過不會自動封閉線的兩端了
1 context.strokeStyle='black'; 2 context.lineWidth=5; 3 context.beginPath(); 4 context.arc(110,110,100,0,0.5*Math.PI,true); 5 //context.closePath(); 6 context.fillStyle="red"; 7 context.fill(); 8 context.stroke();
