canvas画八卦图

methods:{
      getapp(){
        var canvas=document.getElementById('wholeCanvas')
        this.canvas2d=canvas.getContext('2d')
        canvas.width = 1000;
        canvas.height = 800;
        //左边
        this.canvas2d.beginPath(); 
        this.canvas2d.lineWidth=1
        this.canvas2d.strokeStyle="black";
        this.canvas2d.fillStyle="black"
        this.canvas2d.arc(500,350,200,Math.PI*1.5,Math.PI*0.5,true); //参数（x,y,半径r,起始位,终止位,顺、逆时针）
        this.canvas2d.stroke();
        this.canvas2d.fill()
        this.canvas2d.closePath();
        //右边
        this.canvas2d.beginPath(); 
        this.canvas2d.lineWidth=1
        this.canvas2d.strokeStyle="black";
        this.canvas2d.arc(500,350,200,Math.PI*0.5,Math.PI*1.5,true); //参数（x,y,半径r,起始位,终止位,顺、逆时针）
        this.canvas2d.stroke();
        this.canvas2d.closePath();
        //左边黑色
        this.canvas2d.beginPath();
        this.canvas2d.fillStyle="black";
        this.canvas2d.arc(500,450,100,Math.PI*0.5,Math.PI*1.5,true);
        this.canvas2d.fill();
        this.canvas2d.closePath();
        //右边白色
        this.canvas2d.beginPath();
        this.canvas2d.fillStyle="white";
        this.canvas2d.arc(500,250,100,Math.PI*0.5,Math.PI*1.5,false);
        this.canvas2d.fill();
        this.canvas2d.closePath();
        //黑色小圆形
        this.canvas2d.beginPath();
        this.canvas2d.fillStyle="black"
        this.canvas2d.arc(500,250,10,0,Math.PI*2,true);
        this.canvas2d.fill();
        this.canvas2d.closePath();
        //黑色小圆形
        this.canvas2d.beginPath();
        this.canvas2d.fillStyle="white"
        this.canvas2d.arc(500,450,10,0,Math.PI*2,true);
        this.canvas2d.fill();
        this.canvas2d.closePath();
      },

效果：

 

来源：CSDN

作者：WeiflR10

链接：https://blog.csdn.net/WeiflR10/article/details/103907212