CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
参数的定义具体如下：
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
参数：
x -- 圆弧中心（圆心）的 x 轴坐标。
y -- 圆弧中心（圆心）的 y 轴坐标。
radius -- 圆弧的半径。
startAngle -- 圆弧的起始点， x轴方向开始计算，单位以弧度表示。
endAngle -- 圆弧的重点， 单位以弧度表示。
anticlockwise
可选，默认值为false，即默认为顺时针 可选的 Boolean值 ，如果为
true，逆时针绘制圆弧，反之，顺时针绘制。
根据定义，一周的弧度数为2πr/r=2π，360°角=2π弧度，用图例来表示如下：
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var c = document.getElementById("c1");
var context = c.getContext("2d");
c.width = 600;
c.height = 600;
context.lineWidth = 5;
context.strokeStyle = "red";
context.arc(300,300,200,0,1.75*Math.PI);
context.stroke();
};
</script>
<canvas id="c1" style="border:1px solid red"></canvas>
</body>
</html>
效果及解析：
该为逆时针方向绘制，代码调整为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var c = document.getElementById("c1");
var context = c.getContext("2d");
c.width = 600;
c.height = 600;
context.lineWidth = 5;
context.strokeStyle = "red";
context.arc(300,300,200,0,1.75*Math.PI,true); //调整为逆时针方向绘制，还是从0π到1.75π
context.stroke();
};
</script>
<canvas id="c1" style="border:1px solid red"></canvas>
</body>
</html>
效果及解析：
