Using paths to draw arcs in HTML5 canvas

In a canvas drawing, an "arc" can be either an integral circle or a part of a circle.

The code is as follows:

Context.arc ()

Context.arc (x, y, radius, startangle, Endangle, anticlockwise)

In the above method description, X and Y define the center of the circle, and radius defines the radius of the circumference. StartAngle and Endangle are expressed in polar coordinates. Anticlockwise (Boolean value) defines the direction of the arc.

For example, if we want to draw a circle with a radius of 20 at the center of a point (100, 100), we can use the following code:

The code is as follows:

Context.arc (math.pi/180) *0, (math.pi/180) *360, false);

The execution effect is:

It is worth noting that in the code above, we need to convert the starting angle (0) and the end Angle (360) by multiplying (math.pi/180) to the polar coordinate radians. When the starting angle is 0 and the end angle is 360, an integral circle is obtained.

In addition to the whole circle, we can also draw arc fragments. The following code depicts One-fourth circles:

The code is as follows:

Context.arc (math.pi/180) *0, (math.pi/180) *90, false);

We can set anticlockwise to true if we want to draw three-fourths other circles apart from the above arc:

The code is as follows:

Context.arc (math.pi/180) *0, (math.pi/180) *90, true);

1: In the canvas coordinate system, the Y axis is in the downward direction.

2: Using the Context.arcto () method can also be used to draw arcs. The description of the method in the HTML5 Canvas original of Steve Fulton & Jeff Fulton is completely wrong.