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>
