Html5 Canvas painting tutorial (5)-arc method for drawing curves in canvas

Comments: One of the difficulties in drawing curves in anvas is that there are four functions connected to curves! They are arc, arcTo, quadraticCurveTo, and bezierCurveTo. let me start with the simplest method of arc. If you are interested, you can find out. In the canvas Line Painting article, I talked about how to draw a straight line, this article on Curve painting should have been published. However, because canvas draws a special curve, I haven't figured it out yet, so I have to try it step by step.
One of the difficulties in drawing a curve in canvas is that there are four functions for connecting the curve! They are arc, arcTo, quadraticCurveTo, and bezierCurveTo. Let me start with the simplest method of arc.
The role of arc is to draw a regular arc, which can be a complete circle or an arc of a circle.

The arc syntax is as follows::

The Code is as follows:
Context. arc (x, y, radius, startAngle, endAngle, anticlockwise)

I will explain his parameters, that is
Arc (center x, center y, radius, start angle, end angle, counterclockwise)
If we use arc to draw a complete circle, what should we do? We noticed that there is a starting angle and ending angle in the parameter. If we start from 0, the ending angle is 360. Isn't it a positive circle?
Positive solution! However, it should be noted that the angle here is expressed by "radians" (the same is true for Flash). A complete circle is 360 degrees, that is, 2 pi radians.

So we write this:

The Code is as follows:
Ctx. arc (400,400, Math. PI * 2 );
Ctx. fill ();
Ctx. stroke ();

Like lineTo, arc is also the path of painting, so we need to call the fill or stroke method after it to display the image (the red strokeStyle and translucent red fillStyle are used in the figure ).

Now let's draw a 1/4 circle. The angle is 90 degrees. As mentioned above, the 360 degrees angle is 2 PI radians, so the first angle is 2 PI/360 = PI/180 radian, then 90 degrees is 2 PI/360*90 = PI/2 radian (for other angles, Please calculate it yourself ).

The Code is as follows:
Ctx. arc (400,400, 2/4, Math. PI );


 
From the figure, we can determine that the zero degree of arc is commonly used in mathematics, but the angle is opened clockwise by default, opposite to the mathematical model (related to coordinates, because the canvas coordinates are also opposite to the mathematical coordinates ).
However, isn't the previous parameter determined to be counter-clockwise? How can we set this parameter to true?

The Code is as follows:
Ctx. arc (400,400, 20, 0, Math. PI * 2/4, true );


 
As you can see, the angle is expanded counterclockwise, resulting in the ARC becoming 360-90 = 270 degrees.
But! Note that the calculation method of the start and end points always starts from 0 degrees and extends clockwise. The clockwise side is only the direction of the arc.
This will not only prevent confusion but also facilitate computation.
However, it is useful to use it in a counter-clockwise manner.
In the above example, our starting point angle is 0. Now let's try other starting points, such as 90 degrees.

The Code is as follows:
Ctx. arc (400,400, 20, Math. PI * 2/4, Math. PI * 2 + Math. PI );

If the starting point is 90 degrees and the ending point is 90 degrees, the result is nothing to draw. So I changed the ending point angle to 180 degrees, and the final figure is obtained.

Problem: If we draw a complete circle from a non-zero-degree start point, can we do it? Alternatively, you can set the end point of an arc to 360 degrees + starting point angle, for example:

The Code is as follows:
Ctx. arc (400,400, 20, Math. PI * 2/4, Math. PI * 2 + Math. PI * 2/4); // the start point is 90 degrees, and the end point is 360 + 90 degrees.

However, this practice is purely for no reason. Normal people will not use it.
Summary: The arc method of Canvas is to draw a positive arc. It can only draw a positive arc, but it cannot draw other strange arcs, such as the S-shaped curve-although I like the S-shaped shape most.