使用canvas arc()方法画一个太极八卦图
arc() 方法创建弧/曲线(用于创建圆或部分圆)
参数:.arc(圆心x,圆心y,半径,起始弧度,结束弧度,布尔值false-代表顺时针)
第一步:创建一个canvas画布
<canvas width="600" height="600" id="mycanvas"></canvas>
var mycanvas = document.getElementById('mycanvas')
var c = mycanvas.getContext('2d')
第二步:画一个左半圆—为了更方便的看到效果,每一个圆都会用不同的颜色来展示
c.beginPath() //重置当前路径
c.arc(300, 300, 300, Math.PI / 2, Math.PI / 2 * 3)
c.fillStyle = 'pink' //black 填充绘画的颜色
c.fill() //填充当前绘图(路径)
c.closePath() //从当前点回到起始点的路径
![](https://img-blog.csdnimg.cn/img_convert/db5c788a2b0cd166fb6db05be417d737.png)
第三步:画一个右半圆
c.beginPath()
c.arc(300, 300, 300, Math.PI / 2 * 3, Math.PI / 2)
c.fillStyle = 'greenyellow' //'white'
c.fill()
c.closePath()
![](https://img-blog.csdnimg.cn/img_convert/71bad7173d69ee77d00dd92fa14aa380.png)
第四步:画一个上中圆
c.beginPath()
c.arc(300, 150, 150, 0, Math.PI * 2)
c.fillStyle = 'aqua' //black
c.fill()
c.closePath()
![](https://img-blog.csdnimg.cn/img_convert/87753d87ca6c2bb01e262a99a9c5595d.png)
第五步:画一个下中圆
c.beginPath()
c.arc(300, 450, 150, 0, Math.PI * 2)
c.fillStyle = 'blueviolet' //white
c.fill()
c.closePath()
![](https://img-blog.csdnimg.cn/img_convert/1badfe9bb061a8f2e9db1729c97c8900.png)
第六步:画一个上小圆
c.beginPath()
c.arc(300, 150, 75, 0, Math.PI * 2)
c.fillStyle = 'crimson' //white
c.fill()
c.closePath()
![](https://img-blog.csdnimg.cn/img_convert/36637e45a0d57a28d13f4238a57dcf85.png)
第七步:画一个下小圆
c.beginPath()
c.arc(300, 450, 75, 0, Math.PI * 2)
c.fillStyle = 'gold' //black
c.fill()
c.closePath()
![](https://img-blog.csdnimg.cn/img_convert/32c3633f24557ed49637ee8bf7b5df53.png)
第八步:将左半圆、上中圆、下小圆的颜色换成黑色
![](https://img-blog.csdnimg.cn/img_convert/48151cf336ba9bcccd81c4464c32bffe.png)
第九步:将右半圆、下中圆、上小圆的颜色换成白色
![](https://img-blog.csdnimg.cn/img_convert/e2466e872fff7b144b0c0e3dbcb98bd5.png)