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