Functions that JavaScript uses to draw circles in Web pages _javascript tips for using arcs

Parameter settings required by arc

Copy Code code as follows:

Arc (x, y, radius, startangle, Endangle, counterclockwise);

X,y,radius are easy to understand, so focus on talking about Startangle,endangle and counterclockwise three parameters!

Two, arc parameter detailed

1,startangle and Endangle respectively refers to the angle of the beginning of the circle and the end of the angle, the manual above is the beginning of the angle of 0, the end of the angle of math.pi*2, so that the right to draw a circle

2, the following examples to explain StartAngle and endangle (note that the HTML code I did not write)

var c = document.getElementById (' MyCanvas ');
var cxt = C.getcontext ("2d");
Cxt.fillstyle= "#FF0000";
Cxt.arc (A, 0, 1, false);
Cxt.stroke ();

I set the starting angle to 0, and the end angle is set to 1, so the following figure

var c = document.getElementById (' MyCanvas ');
var cxt = C.getcontext ("2d");
Cxt.fillstyle= "#FF0000";
Cxt.arc (A, 0, 1, false);
Cxt.stroke ();

I set the starting angle to 1, and the end angle is set to 2, so the following figure

Above we can see that the end of the first picture is the beginning of the second diagram, that is, a circle has countless angles, as long as you set the starting angle and end angle, it can be the shape of the arc to connect two points! The difference between the starting point and the end point is the length of the two points on the chart! When the difference between the starting point and the end point can be two points coincide, the formation of a circle! Knowing this, we can make a dynamic circle.

3,counterclockwise refers to whether it is counterclockwise (true) or clockwise (false)

Everyone look, when I set the starting point to 0, the end point is 1, select clockwise

var c = document.getElementById (' MyCanvas ');
var cxt = C.getcontext ("2d");
Cxt.fillstyle= "#FF0000";
Cxt.arc (A, 0, 1, false);
Cxt.stroke ();

When I set the starting point to 0, the end point is 1, when I select counterclockwise

var c = document.getElementById (' MyCanvas ');
var cxt = C.getcontext ("2d");
Cxt.fillstyle= "#FF0000";
Cxt.arc (0, 1, true);
Cxt.stroke ();

The above content is a small series to introduce the JavaScript in the Web page to draw a circle function arc use method, hope you like.