Tai Chi acht Diagramme

Verwenden Sie die Methode canvas arc(), um ein Tai-Chi-Bagua-Diagramm zu zeichnen

Die Methode arc() erstellt Bögen/Kurven (wird verwendet, um Kreise oder Teilkreise zu erstellen)

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

Schritt 1: Erstellen Sie eine Leinwand

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

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

Schritt 2: Zeichnen Sie einen linken Halbkreis – zur besseren Übersicht wird jeder Kreis in einer anderen Farbe angezeigt

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

Schritt 3: Zeichnen Sie einen rechten Halbkreis

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

Schritt 4: Zeichnen Sie einen oberen mittleren Kreis

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

Schritt 5: Zeichnen Sie einen unteren mittleren Kreis

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

Schritt 6: Zeichnen Sie einen kleinen oberen Kreis

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

Schritt 7: Zeichnen Sie einen unteren Kreis

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

Schritt 8: Ändern Sie die Farbe des linken Halbkreises, des oberen mittleren Kreises und des unteren kleinen Kreises in Schwarz

Schritt 9: Ändern Sie die Farbe des rechten Halbkreises, des unteren mittleren Kreises und des oberen kleinen Kreises in Weiß