使用canvas arc()方法畫一個太極八卦圖
arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）
參數(shù)：.arc(圓心x,圓心y,半徑,起始弧度,結(jié)束弧度,布爾值false-代表順時針)
第一步：創(chuàng)建一個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()
第八步：將左半圓、上中圓擒滑、下小圓的顏色換成黑色
第九步：將右半圓帆精、下中圓、上小圓的顏色換成白色
