contxt.arc(x, y , r, 0 , 弧 1.5*Math.PI PI要注意大小写 ， 顺时针=false 逆时针 true)
例如 context.arc(300, 300, 200, 0.5*Math.PI, 1*Math.PI, false);
<!DOCTYPE html>
<html>
<canvas id="diag" height="200" width="200" style="border:1px solid">update your</canvas>
<canvas id="diag2" height="200" width="200" style="border:1px solid">update your</canvas>
</html>
<script>
var canvas = document.getElementById(‘diag‘); //huo
var context = canvas.getContext(‘2d‘); //获取canvas上下环境
canvas.width = ‘800‘;
canvas.height = ‘800‘;
context.lineWidth=5;
context.strokeStyle= "#00f5f8"; //线的填充颜色
// context.arc(300, 300, 200, 0.5*Math.PI, 1*Math.PI, false);
context.fillStyle = "#aaa" 封闭图片内部填充颜色
for(var i=0; i<10; i++) {
context.beginPath();
context.arc(50*i, 330, 20, 0, 0.2*Math.PI*i, false);
context.fill();
context.stroke();
}
</script>
原文：http://www.cnblogs.com/agang-php/p/4822874.html