通过画下面这个来解析一下画弧和圆的基本函数
一、画弧和圆的函数
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x,y是圆的圆心坐标，r是圆心的半径，sAngle是起始角，以弧度计，也就是画得圆的开始。eAngle是结束角，也就是画圆的结束。counterclockwise时顺时针画还是逆时针画。
（弧的圆形的三点钟位置是 0 度）
下面这个代码就是画出上面那些弧和圆的例子
<!DOCTYPE html>
<html>
<head>
<title>画圆</title>
</head>
<body>
<canvas id="canvas" width="1080" height="768" style="border: 1px solid #aaa;margin: 50px auto;display: block;">
当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">
window.onload=function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
/*//顺时针
context.lineWidth = 5;
context.strokeStyle = "#005588";
context.arc(300,300,200,0,1.5*Math.PI,true);
context.stroke();
//逆时针
context.lineWidth = 5;
context.strokeStyle = "#005588";
context.arc(300,300,200,0,1.5*Math.PI);
context.stroke();*/
context.lineWidth = 5;
context.strokeStyle = "#005588";
//首尾相连
for(var i = 0 ; i < 10 ; i++){
context.beginPath();
context.arc(100+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.stroke();
}
//首尾不相连 closepath封闭路径
for(var i = 0 ; i < 10 ; i++){
context.beginPath();
context.arc(100+i*100,180,40,0,2*Math.PI*(i+1)/10);
context.stroke();
}
//首尾相连 逆时针
for(var i = 0 ; i < 10 ; i++){
context.beginPath();
context.arc(100+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
context.closePath();
context.stroke();
}
//首尾不相连 逆时针
for(var i = 0 ; i < 10 ; i++){
context.beginPath();
context.arc(100+i*100,420,40,0,2*Math.PI*(i+1)/10,true);
context.stroke();
}
context.fillStyle = "#005588";
//首尾相连 顺时针 有closePath填充
for(var i = 0 ; i < 10 ; i++){
context.beginPath();
context.arc(100+i*100,540,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.fill();
}
//首尾相连 顺时针 无closePath填充 fill有无closePath都行
for(var i = 0 ; i < 10 ; i++){
context.beginPath();
context.arc(100+i*100,660,40,0,2*Math.PI*(i+1)/10);
context.fill();
}
}
</script>
</body>
</html>
注意：
closepath封闭路径，顺时针和逆时针画出来的不一样。