Detailed description of the arc () method of canvas and canvasarc Method
When drawing a curve for a project, we mainly use the arc () method to draw an arc:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
That is, arc (x coordinate of the center, y coordinate of the center, radius of the circle, starting angle (in radians, that is, three o'clock of the Center of l is 0 degrees), ending angle, specifies whether to draw images clockwise or counterclockwise)
The last parameter is optional. true = clockwise and false = clockwise.
For example, if the following arc is drawn, the code can be written as follows:
// The first section of the arc cvt. beginPath (); // radians = angle * Math. PI/180 cvt. arc( 270,115,176,-41 * Math. PI/180,20 * Math. PI/180, false); // clockwise 319 is the same as-41 cvt. strokeStyle = "# ff0000"; cvt. stroke ();
Because it is drawn downward from the top of the starting angle,-41 indicates that it is drawn from the top of the starting angle. Because it is clockwise, it is drawn from the negative angle, then the degree continues increasing until 0 degrees, and then increases to 20 degrees. At this point, an arc is finished. Another layer means that 319 is the same as-41, because if the starting angle of this arc is set to 319, the angle is also increasing clockwise until 360 degrees, and then increase from 0 degrees to 20 degrees, you can draw the same arc.
Let's take a counter-clockwise example:
The required code is as follows:
// The second arc cvt. beginPath (); // radians = angle * Math. PI/180 cvt. arc (639,247,216,-160 * Math. PI/180,-280 * Math. PI/180, true); // counterclockwise-160 and 200 are the same cvt. strokeStyle = "# ff0000"; cvt. stroke ();
The starting angle of the arc is-160 degrees, which is the same as that of 200 degrees (360 + (-160) = 200). Because it is counter-clockwise, the angle is reduced, the arc is drawn from-160 to-280. On the contrary, you can draw the same arc from 200 to 80.
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
