How to draw a circle using javascript

How to draw a circle with javascript: 1. Set the parameters required by arc; 2. Set startAngle and endAngle; 3. Set the direction of drawing the circle through counterclockwise.

The operating environment of this article: windows7 system, javascript version 1.8.5, DELL G3 computer

How to draw a circle with javascript?

How to use JavaScript function arc to draw circles in web pages

The operating environment of this article: windows7 system, javascript version 1.8.5, DELL G3 computer

1. The parameter settings required by arc

The code is as follows:

arc(x, y, radius, startAngle, endAngle, counterclockwise);

where x, y, radius are very It’s easy to understand, so let’s focus on the three parameters: startAngle, endAngle and counterclockwise!

2. Detailed explanation of arc parameter

1. startAngle and endAngle refer to the starting angle and ending angle of the circle respectively. The manual says that the starting angle is 0. The ending angle is Math.PI*2, which just draws a circle

2. The following explains startAngle and endAngle through examples (note that I did not write 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();

I set the starting angle to 0 and the ending angle to 1, as shown below

##

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

I set the starting angle to 1 and the ending angle to 2, so as shown below

Above we can see the first picture The end point of the picture is the starting point of the second picture, which means that a circle has countless angles. As long as you set the start angle and end angle, it can connect the two points in the shape of an arc! The difference between the starting point and the end point is the length of the two points on the graph! When the difference between the starting point and the end point can be that the two points coincide, a circle is formed! Knowing this, we can make a dynamic circle

3. Counterclockwise refers to counterclockwise (true) or clockwise (false)

You see, when I set the starting point to 0, the end point is 1, when selecting 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 starting point to 0 and the end point to 1, when selecting counterclockwise

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

Recommended study: "

javascript basic tutorial"

The above is the detailed content of How to draw a circle using javascript. For more information, please follow other related articles on the PHP Chinese website!