How to use path to draw Arc in HTML5 Canvas

This article mainly introduces the relevant knowledge of "how to use the path to draw the arc in HTML5 Canvas". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to use the path to draw the arc in HTML5 Canvas" can help you solve the problem.

In Canvas drawings, an arc can be either a whole circle or part of a circle.

Copy the 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 circumference. StartAngle and endAngle are expressed as polar coordinate values. 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 (100100), 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 as follows:

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

In addition to the whole circle, we can also draw arc segments. The following code depicts 1/4 circles:

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 3/4 circles in addition to the above arc, we can set anticlockwise to true:

Copy the 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.

Translation Note 2: arcs can also be drawn using the context.arcTo () method. The description of this method in Steve Fulton & Jeff Fulton's HTML5 Canvas original work is completely wrong. For the correct summary of arcTo (), please see: arcTo of the curve.

This is the end of the content about "how to use paths to draw arcs in HTML5 Canvas". Thank you for your 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.