How to Use the arc function of JavaScript circle in a webpage, javascriptarc

How to Use the arc function of JavaScript circle in a webpage, javascriptarc

1. parameter settings required by arc

Copy codeThe Code is as follows:
Arc (x, y, radius, startAngle, endAngle, counterclockwise );

X, y, and radius are easy to understand, so let's focus on startAngle, endAngle, and counterclockwise!

Ii. arc Parameters

1. startAngle and endAngle indicate the angle at which the circle starts and the angle at which the circle ends. In the manual, the start angle is 0 and the end angle is Math. PI * 2. This just draws a circle.

2. The following example is used to explain startAngle and endAngle (note that I have not written the html code)

var c = document.getElementById('myCanvas');var cxt = c.getContext("2d");cxt.fillStyle="#FF0000";cxt.arc(70, 30, 25, 0, 1, false);cxt.stroke();

Set the start angle to 0 and end angle to 1, as shown in figure

var c = document.getElementById('myCanvas');var cxt = c.getContext("2d");cxt.fillStyle="#FF0000";cxt.arc(70, 30, 25, 0, 1, false);cxt.stroke();

Set the start angle to 1 and end angle to 2, as shown in figure

We can see that the end point of the first graph is the starting point of the second graph. That is to say, if you have set the start angle and end angle for a circle, it connects two points in the arc shape! The difference between the start point and the end point is the length of two points! When the difference between the start point and the end point can be two points, a circle is formed! By knowing this, we can create dynamic circles.

3. counterclockwise indicates whether it is counter-clockwise (true) or clockwise (false)

As you can see, when I set the start point to 0 and the end point to 1, select clockwise

var c = document.getElementById('myCanvas');var cxt = c.getContext("2d");cxt.fillStyle="#FF0000";cxt.arc(70, 30, 25, 0, 1, false);cxt.stroke();

When I set the start point to 0, the end point to 1, and select the clockwise

var c = document.getElementById('myCanvas');var cxt = c.getContext("2d");cxt.fillStyle="#FF0000";cxt.arc(70, 30, 25, 0, 1, true);cxt.stroke();

The above content is a small Editor to introduce how to use JavaScript to circle the function arc on the webpage. I hope you will like it.