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

                              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()