绘制圆弧的几种简单方法

 

展示图：

 

//绘制圆弧  true：逆时针  false：顺时针
context.lineWidth=5;
context.strokeStyle="pink";                                                      
context.arc(40,40,30,0,Math.PI*2);
context.stroke();//外环是粉色的圆，无填充色


context.beginPath();
context.strokeStyle="yellow";
context.fillStyle="red";
context.arc(100,40,30,0,Math.PI*2);
context.fill();
context.stroke();//外环是黄色，内填充是red

context.beginPath();
context.strokeStyle="yellow";
context.fillStyle="red";
context.arc(180,40,30,0,Math.PI/3,true);
context.stroke(); //外环是黄色

context.beginPath();
context.strokeStyle="yellow";
context.fillStyle="red";
context.arc(260,40,30,0,Math.PI/3,true);
context.fill();//内填充是red的60度的弧

context.beginPath();
context.strokeStyle="yellow";
context.fillStyle="red";
context.arc(260,100,30,0,Math.PI/3,true);
context.fill();
context.stroke();//外环是黄色，内填充是red的60度的弧