HTML5 canvas Drawing 5: Draw a curve of Arc

Draw lines on canvasArticleIn, I talked about the method of drawing a straight line. The article on drawing a curve should have been published. However, because the canvas draw curve is special, I have not understood it yet, so I should 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 areArc,Arcto,Quadraticcurveto,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:

 
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 in radians (the same is true for flash ),A complete circle is 360 degrees, that is, 2 pi radians.

So we write this:

 
CTX. ARC (400,400, 20, 0, math. Pi * 2); CTX. Fill (); CTX. Stroke ();
 

(Why?CodeIs it highlighted ?)

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 is2PI/360 = PI/180Radians, so 90 degrees is 2PI/360*90 = PI/2 radian (other angles are calculated by yourself ).

 
CTX. ARC (400,400, 2/4, math. Pi );
 

 

From the figure, we can determine that the degree 0 of arc is commonly used in mathematics, but the default angle isClockwiseOpen, opposite to the mathematical model (related to coordinates, because canvas coordinates are also opposite to mathematical coordinates ).

However, isn't the previous parameter determined to be counter-clockwise? How can we set this parameter to true?

 
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 thatCalculation of the start and end pointsAlways starts from 0 degrees and rotates clockwise. Only the clockwiseDraw direction of the arc.

This will not only prevent confusion but also facilitate computation.

However, flexible useCounterclockwise, Sometimes very useful.

In the above example, our starting point angle is 0. Now let's try other starting points, such as 90 degrees.

 
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.

Q: If we draw a complete circle from a non-zero-degree start point, will it work? You can also set the endpoint of the arc360 degrees + starting pointSuch:

 
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.

Conclusion: 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 shape. Although I like the S-shaped shape most.

Original