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();
      },

效果:

 

发布了64 篇原创文章 · 获赞 9 · 访问量 7044
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章