太极八卦图

使用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() //从当前点回到起始点的路径

第三步：画一个右半圆

   c.beginPath()
    c.arc(300, 300, 300, Math.PI / 2 * 3, Math.PI / 2)
    c.fillStyle = 'greenyellow' //'white'
    c.fill()
    c.closePath()

第四步：画一个上中圆

    c.beginPath()
    c.arc(300, 150, 150, 0, Math.PI * 2)
    c.fillStyle = 'aqua' //black
    c.fill()
    c.closePath()

第五步：画一个下中圆

    c.beginPath()
    c.arc(300, 450, 150, 0, Math.PI * 2)
    c.fillStyle = 'blueviolet' //white
    c.fill()
    c.closePath()

第六步：画一个上小圆

    c.beginPath()
    c.arc(300, 150, 75, 0, Math.PI * 2)
    c.fillStyle = 'crimson' //white
    c.fill()
    c.closePath()

第七步：画一个下小圆

    c.beginPath()
    c.arc(300, 450, 75, 0, Math.PI * 2)
    c.fillStyle = 'gold' //black
    c.fill()
    c.closePath()

第八步：将左半圆、上中圆、下小圆的颜色换成黑色

第九步：将右半圆、下中圆、上小圆的颜色换成白色