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