1 绘制圆形（arc）

ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
x,y圆心坐标，r半径；
sAngle,eAngle:起始，结束角度。
counterclockwise:是否是逆时针。true为逆时针，false为顺时针（默认）

弧度和角度的转换公式： rad = deg*Math.PI/180
圆形上面的点的坐标的计算公式
x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标

y =y0 + Math.sin(rad) * R;//注意都是弧度

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //弧形：圆心，半径，角度
    var x0 = 200;
    var y0 = 200;
    var radius = 100;
    var Angle = 72;
    ctx.lineWidth = 2;
    ctx.strokeStyle = "red";
    //角度都要转成弧度
    ctx.arc(x0,y0,radius,0,Angle*Math.PI/180,false);        //counterclockwise:false 表示顺时针（默认）
    ctx.stroke();
    ctx.fillStyle = 'pink';
    ctx.fill();

    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 6;
    ctx.arc(x0,y0,radius,Angle*Math.PI/180, 270*Math.PI/180,false);
    ctx.stroke();
    //ctx.fillStyle = 'orange';
    ctx.fill();
</script>

2 非零正交原则

ctx.fill()；

注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。

1.如果线段是与路径的顺时针部分相交，则计数器加1，
2.如果线段是与路径的逆时针部分相交，则计数器减1，
3.若计数器最终结果不是0，在调用fill()方法时，浏览器就会对其进行填充；若为0，就不对其填充。

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.arc(250,250,200,0,2*Math.PI,true);
ctx.arc(250,250,100,0,2*Math.PI,false);
ctx.fillStyle = "pink";
ctx.fill();
</script>