首先是一个静态的八卦图:
这是状态图
主要代码如下:
左半圆
ctx.beginPath()
ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true)
ctx.fill()
//右半圆
ctx.beginPath()
ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5)
ctx.fillStyle = 'white'
ctx.fill()
//上整圆
ctx.beginPath()
ctx.arc(250,150,100,0,Math.PI*2)
ctx.fillStyle = 'white'
ctx.fill()
//下整圆
ctx.beginPath()
ctx.arc(250,350,100,0,Math.PI*2)
ctx.fillStyle = 'black'
ctx.fill()
//上小圆
ctx.beginPath()
ctx.arc(250,150,30,0,Math.PI*2)
ctx.fillStyle = 'black'
ctx.fill()
//