html5如何使用canvas画空心圆与实心圆

html-css013

html5如何使用canvas画空心圆与实心圆,第1张

stroke()是描边，就是空心圆。fill()是填充，就是实心圆

//空心

var canvas = document.getElementById("myCanvas").getContext('2d')

canvas.beginPath()

canvas.arc(圆心x坐标,圆心y坐标,半径,0,2*Math.PI,true)

canvas.closePath()

canvas.strokeStyle='black'

canvas.stroke()

//实心

var canvas = document.getElementById("myCanvas").getContext('2d')

canvas.beginPath()

canvas.arc(圆心x坐标,圆心y坐标,半径,0,2*Math.PI,true)

canvas.closePath()

canvas.fillStyle='black'

canvas.fill()

<canvas id="circles" width="500" height="500"></canvas>

<script>

var canvas=document.querySelector("#circles")

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

var colors=["red"，"blue"，"green"，"orange"，"black"]

for(var i=1i<6i++){

cts.beginPath()

cts.arc(40*i+20，40，40，0，Math.PI*2)

cts.fillStyle=colors[i-1]

cts.closePath()

cts.fill()

}

</script>