使用canvas绘制太极

太极图

今天学习canvas，哈哈哈，其实我还搞不清楚方向来者，不过太极倒是画出来了，记录一下，方便日后查询
理论：绘制圆形cxt.arc(x,y,r,起点弧度（3点位置），终止弧度，bool(默认是false:顺时针，true:逆时针))
cxt.arc(600,600,100,Math.PIx0.5，Math.PIx1.5),是右边半圆。
因为*号不显示出来，我就用x了

成图：

代码如下：

 <canvas id='canvas' height="800" width="800">
    </canvas>

 let canvas=document.getElementById('canvas');
    let cxt=canvas.getContext('2d');
//大圆部分
       cxt.beginPath();
       cxt.arc(200,200,100,0,Math.PI*2)
       cxt.closePath();
       cxt.fillStyle='black';
       cxt.fill();
       //半边白色的圆
       cxt.beginPath();
       cxt.arc(200,200,100,1.5,Math.PI*1.5,true)
       cxt.closePath();
       cxt.fillStyle='white';
       cxt.fill();
        //半边小白色的圆
        cxt.beginPath();
       cxt.arc(201,150,50,1.5,Math.PI*1.5,false)
       cxt.closePath();
       cxt.fillStyle='white';
       cxt.fill();
       //下半边黑色的圆
       cxt.beginPath();
       cxt.arc(200,250,50,1.5,Math.PI*1.5,true)
       cxt.closePath();
       cxt.fillStyle='black';
       cxt.fill();
     // 上半边白色的圆里面的黑色的圆
     cxt.beginPath();
       cxt.arc(200,150,25,0,Math.PI*2)
       cxt.closePath();
       cxt.fillStyle='black';
       cxt.fill();
       //下半边黑色圆里面的白色的圆
       cxt.beginPath();
       cxt.arc(200,250,25,0,Math.PI*2)
       cxt.closePath();
       cxt.fillStyle='white';
       cxt.fill();
     //------------------------------------------------------
     //这是下半边圆的代码，图片在下面
      cxt.beginPath();
       cxt.arc(600,600,100,0,Math.PI*1)
       cxt.closePath();
       cxt.fillStyle='black';
       cxt.fill();

下半边圆图片如下