Using paths to draw arcs in HTML5 Canvas_html5 tutorial techniques

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

In Canvas drawing, "arc" can be either a complete circle or a part of the circumference.

Copy code

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 circle. startAngle and endAngle are expressed as polar coordinate values. anticlockwise (boolean) defines the direction of the arc.

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

Copy the code

The code is as follows:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180) *360, false);

The execution effect is:

It is worth noting that in the above code, we need to convert the starting angle (0) and the ending angle (360) into polar coordinate radians by multiplying by (Math.PI/180). When the starting angle is 0 and the ending angle is 360, you get a full circle.

In addition to full circles, we can also draw arc segments. The following code draws a quarter of a circle:

Copy the code

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 three quarters of the circle in addition to the above arc, we can set anticlockwise to true:

Copy code

The code is as follows:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90 , true);

Translation Note 1: In the Canvas coordinate system, the direction of the Y-axis is downward.

Annotation 2: You can also draw arcs using the context.arcTo() method. The description of this method in the original HTML5 Canvas book by Steve Fulton & Jeff Fulton is completely wrong. For the correct summary of arcTo(), see: arcTo of curve .