Draw an arc using a path in HTML5 Canvas, html5canvas

Draw an arc using a path in HTML5 Canvas, html5canvas
This article mainly introduces how to draw an arc using a path in HTML5 Canvas. This article demonstrates how to draw a complete circle, half circle, and arc in HTML5 Canvas. For more information, see

This article is translated from Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "Advanced Path Methods, Arcs"

In a Canvas drawing, an arc can be either an integral circle or a part of a circumference.

The Code is as follows:
Context. arc ()
Context. arc (x, y, radius, startAngle, endAngle, anticlockwise)

In the preceding 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 point (100,100) as the center and a radius of 20, we can use the following code:

The Code is as follows:
Context. arc (100,100, 20, (Math. PI/180) * 0, (Math. PI/180) * 360, false );

The execution result is:

It is worth noting that in the above Code, we need to multiply the starting angle (0) and ending angle (360) by (Math. PI/180) to convert them into polar radians. When the starting angle is 0 and the ending angle is 360, an integral circle is obtained.

In addition to the circle, we can also draw an arc fragment. The following code draws 1/4 circles:

The Code is as follows:
Context. arc (100,100, 20, (Math. PI/180) * 0, (Math. PI/180) * 90, false );

If we want to draw another 3/4 circles except the arc, we can set anticlockwise to true:

The Code is as follows:
Context. arc (100,100, 20, (Math. PI/180) * 0, (Math. PI/180) * 90, true );

In the Canvas coordinate system, the Y axis is downward.

NOTE 2: You can use the context. arcTo () method to draw an arc. In the original HTML5 Canvas of Steve Fulton & Jeff Fulton, the description of this method is completely incorrect. For a summary of the correct arcTo (), see arcTo of the curve.