Use HTML5CanvasAPI to draw arcs and circles-html5 tutorial tips-

This article describes how to use HTML5CanvasAPI to draw arcs and circles. You can use JavaScript to customize radians and set the start and end points. If you need JavaScript, refer to html5, the CanvasRenderingContext2D object also provides methods specifically used to draw circles or arcs. For details, refer to the following attributes and methods:

Copy the content to the clipboard using JavaScript Code

1. Arc (x, y, radius, startRad, endRad, anticlockwise)

Draw an arc of a circle centered on coordinate points (x, y) and radius on the canvas. The starting radian of this arc is startRad, And the ending radian is endRad. Here the radians are calculated based on the clockwise rotation angle in the positive direction of the X axis (clock three o'clock. Anticlockwise indicates that the image is drawn in the clockwise or clockwise direction. If it is true, it indicates the clockwise direction. If it is false, it indicates the clockwise direction. The anticlockwise parameter is optional. The default value is false, that is, clockwise.

Radians in the arc () method

Copy the content to the clipboard using JavaScript Code

1. ArcTo (x1, y1, x2, y2, radius)

This method uses the angle between the current endpoint, endpoint 1 (x1, y1), and Endpoint 2 (x2, y2, draw an arc on the circle tangent to both sides of the angle and radius. Generally, the starting position of the drawn arc is the current endpoint, And the ending position is endpoint 2, and the direction of the arc is the direction of the shortest arc connecting the two endpoints. In addition, if the current endpoint is not on the specified circle, this method will draw a straight line from the current endpoint to the starting point of the arc.
Since the arcTo () method is described in detail in a large amount of space, please go here to view the detailed usage of arcTo.

After learning about the above API for canvas to draw an arc, let's take a look at how to draw an arc using arc. We already know that the 4th and 5th parameters received by arc () indicate the start and end radians of the drawn arc. I believe that you have learned radians in your school's mathematics or geometric courses. radians are an angle unit. The arc with the arc length equal to the radius is 1 radian. We also know that the circle with a radius of r has a circumference of 2 π r. With this knowledge of ry, we can use the arc () method to draw an arc.

Draw an arc using canvas

Now, we will draw a 1/4 arc of a circle with a radius of 50 PX.

Copy the content to the clipboard using JavaScript Code

5. HTML5 Canvas draw arc Entry Example
11. Your browser does not support canvas labels.