Tai Chi Eight Diagrams

Use the canvas arc() method to draw a Tai Chi Bagua diagram

The arc() method creates arcs/curves (used to create circles or partial circles)

参数：.arc(圆心x,圆心y,半径,起始弧度,结束弧度,布尔值false-代表顺时针)

Step 1: Create a canvas canvas

     <canvas width="600" height="600" id="mycanvas"></canvas>

     var mycanvas = document.getElementById('mycanvas')
     var c = mycanvas.getContext('2d')

Step 2: Draw a left semicircle—for easier viewing, each circle will be displayed in a different color

    c.beginPath() //重置当前路径
    c.arc(300, 300, 300, Math.PI / 2, Math.PI / 2 * 3)
    c.fillStyle = 'pink' //black  填充绘画的颜色
    c.fill() //填充当前绘图（路径）
    c.closePath() //从当前点回到起始点的路径

Step 3: Draw a Right Semicircle

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

Step 4: Draw an upper middle circle

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

Step 5: Draw a lower middle circle

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

Step 6: Draw a small upper circle

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

Step 7: Draw a lower circle

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

Step 8: Change the color of the left semicircle, upper middle circle, and lower small circle to black

Step 9: Change the color of the right semicircle, lower middle circle, and upper small circle to white