HTML5 Canvas labels for daily training-draw a circle-

In the previous section, we learned how to use Canvas to draw a rectangle. Is it still the same if you want to draw a circle? Steps to draw a circle: some steps are similar to the rectangle drawn in the previous section. If you do not see the content of this section, click here-HTML5 daily practice ...,. HTML5 Canvas tag application for daily training-draw a circle

In the previous section, we learned how to use Canvas to draw a rectangle. Is it still the same if you want to draw a circle?

To draw a circle:

Some steps are similar to the rectangle drawn in the previous section, so we will not repeat them here. If you do not see the content in the section, click here -- HTML5 Canvas tag application-draw a rectangle.

1. Create a path
First, use the beginPath () method of the graphic context object.

2. Create a circular path
When creating a circular path, you must use the arc () method of the circular context object.
Arc (x, y, radius, startAngle, endAngle, anticlockwise );
X: the abscissa of the starting point.
Y: The ordinate of the start point.
Radius: indicates the circular radius.
StartAngle: indicates the start angle.
EndAngle: indicates the end angle.
Anticlockwise: Indicates whether to draw clockwise, boolean Type

3. Close the path
After creating a path, use the closePath () method of the graphic context object to disable the path.

4. Draw a Graphic Style
I don't want to say much about this.

Case

            
         HTML5 Canvas tag application for daily training-draw a circle