<canvas id="myCanvas" width="800" height="500"></canvas>
//start和end是开始的角度！！！
var arc_list = [
{
"x":200,
"y":200,
"r":180,
"start":90,
"end":270,
"color":"black",
},
{
"x":200,
"y":110,
"r":90,
"start":0,
"end":360,
"color":"white",
},
{
"x":200,
"y":290,
"r":90,
"start":0,
"end":360,
"color":"black",
},
{
"x":200,
"y":110,
"r":30,
"start":0,
"end":360,
"color":"black",
},
{
"x":200,
"y":290,
"r":30,
"start":0,
"end":360,
"color":"white",
},
]
var myCanvas = document.querySelector("#myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.moveTo(380,200);
ctx.arc(200,200,180,Math.PI/180*0,Math.PI/180*360);
ctx.closePath();
ctx.stroke();
function fn(){
for(var i=0;i<arc_list.length;i++;i++){
var arc = arc_list[i];
ctx.beginPath();
ctx.fillStyle = arc.color;
ctx.moveTo(arc.x,arc.y)
ctx.arc(arc.x,arc.y,arc.r,Math.PI/180*arc.start,Math.PI/180*arc.end)
ctx.closePath();
ctx.fill()
}
}
fn()
