canvas绘制弧形，中间颜色填充

颜色填充时候，即使没有封闭，没有closePath也不会影响，canvas颜色也会在收尾自动连接然后填充， 

arc函数：(100,100)为圆心，500为半径，从0到0.5π的逆时针弧，最后一个参数表示顺时针还是逆时针，默认是false顺时针

context.arc(100, 100, 50, 0, 0.5 * Math.PI, true)

其中0，0.5π，1π，1.5π的位置是不变的，变的只有顺时针和逆时针

var canvas = document.getElementById('huxian')

canvas.width = 1024

canvas.height = 900


var context = canvas.getContext("2d")

context.lineWidth = 5

context.strokeStyle = "#005588" //边的颜色


// arc函数：(100,100)为圆心，500为半径，从0到0.5π的逆时针弧

// 其中0，0.5π，1π，1.5π的位置是不变的，变的只有顺时针和逆时针

context.arc(100, 100, 50, 0, 0.5 * Math.PI, true)

context.stroke()


// 写上begin和close即使不是封闭的也会自动封口，顺时针

context.strokeStyle = "red"

for (var i = 1; i < 10; i++) {

context.beginPath()

context.arc(100 * i, 220, 50, 0, 2 * Math.PI * i / 10)

context.closePath()

context.stroke()

}


// 只写begin不屑close，也会有连续的

context.strokeStyle = "green"

for (var i = 1; i < 10; i++) {

context.beginPath()

context.arc(100 * i, 120 * 3, 50, 0, 2 * Math.PI * i / 10)

context.stroke()

}


// 以上证明begin可以开始写下一个路径，当填充的时候跟图形是否闭合close，无关


//颜色填充,begin和close

context.fillStyle = "yellow"

context.strokeStyle = "blue"

for (var i = 1; i < 10; i++) {

context.beginPath()

context.arc(100 * i, 120 * 4, 50, 0, 2 * Math.PI * i / 10)

context.closePath()

context.fill()

context.stroke()

}



// 颜色填充有begin没有close

context.fillStyle = "pink"

context.strokeStyle = "purple"

for (var i = 1; i < 10; i++) {

context.beginPath()

context.arc(100 * i, 120 * 5, 50, 0, 2 * Math.PI * i / 10)

context.fill()

context.stroke()

}


//颜色填充顺时针

context.fillStyle = "#665714"

context.strokeStyle = "#1536ec"

for (var i = 1; i < 10; i++) {

context.beginPath()

context.arc(100 * i, 120 * 6, 50, 0, 2 * Math.PI * i / 10, true)

context.fill()

context.stroke()

}