canvas绘制弧形，中间颜色填充_canvas.getcontext('2d') 圆类填充色

颜色填充时候，即使没有封闭，没有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()
 
}