How to use canvas to draw Hollow Circle and solid Circle in html5

This article mainly introduces the relevant knowledge of "how to use canvas to draw hollow circles and solid circles in html5", Xiaobian shows you the operation process through actual cases, the method of operation is simple and fast, and practical. I hope that this article "how to use canvas to draw hollow circles and solid circles in html5" can help you solve the problem.

Copy the code

The code is as follows:

Var canvas=document.getElementById ("canvas")

Var cxt=canvas.getContext ("2d")

/ / draw a hollow circle

Cxt.beginPath ()

Cxt.arc (200, 200, 50, 0, 360, false)

Cxt.lineWidth=5

Cxt.strokeStyle= "green"

Cxt.stroke (); / / draw a hollow circle

Cxt.closePath ()

/ / draw a solid circle

Cxt.beginPath ()

Cxt.arc (200, 100, 50, 50, 0, 360, false)

Cxt.fillStyle= "red"; / / fill color. Default is black.

Cxt.fill (); / / draw a solid circle

Cxt.closePath ()

/ / combination of hollow and solid

Cxt.beginPath ()

Cxt.arc (300, 300, 50, 0, 360, false)

Cxt.fillStyle= "red"

Cxt.fill ()

Cxt.strokeStyle= "green"

Cxt.stroke ()

Cxt.closePath ()

This is the end of the introduction about "how to draw hollow circles and solid circles with canvas in html5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.