html5 Canvas drawing tutorial (5)—arc method of drawing curves in canvas_html5 tutorial skills

In this article Drawing Lines on Canvas, I talked about how to draw straight lines. Logically, this article on drawing curves should have been published long ago, but since drawing curves on canvas is quite special, I haven’t figured it out yet, so Try it step by step.
One of the difficulties in drawing curves in canvas is that there are only 4 functions for curves! They are arc, arcTo, quadraticCurveTo, and bezierCurveTo. Let me start with the simplest arc method.
The function of arc is to draw a regular arc, which can be a complete circle or a certain arc of a circle. The syntax for arc is as follows: 🎜>

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
I will explain its parameters, that is,
arc(center of circle x, center of circle y, radius, starting angle, ending angle, counterclockwise or not)

What should we do if we use arc to draw a complete circle? Everyone noticed that there is a start angle and an end angle in the parameters. If our start angle is 0 and the end angle is 360, isn't it a perfect circle?

Correct answer! But it should be noted that the angle here is expressed in "radians" (the same is true for Flash). A complete circle is 360 degrees, which is 2PI radians. So we write like this:

Copy the code


The code is as follows:


ctx.arc(400,400,20,0,Math.PI*2); ctx.fill(); ctx.stroke();

Like lineTo, arc is also a drawing path, so we have to call the fill or stroke method behind it to display the graphics (red strokeStyle and translucent red fillStyle are used in the picture).

Now let’s draw a 1/4 circle, the angle is 90 degrees. As mentioned before, a 360-degree angle is 2PI radians, so a one-degree angle is 2PI/360=PI/180 radians, then 90 degrees is 2PI/360*90=PI/2 radians (please calculate other angles by yourself).

Copy code

The code is as follows:

ctx.arc(400,400,20,0 ,Math.PI*2/4);

From the figure, we can determine that 0 degrees of arc is 0 degrees commonly used in mathematics, but the angle defaults to The hour hand is open, which is opposite to the mathematical model (it is related to the coordinates, because the canvas coordinates are also opposite to the mathematical coordinates). But isn’t there a parameter in front to determine whether it is counterclockwise? How about we set it to true?

Copy code

The code is as follows:

ctx.arc(400,400,20,0 ,Math.PI*2/4,true);

You will see that the angle becomes counterclockwise, causing the arc to become 360 -90=270 degrees. But! One thing everyone should pay attention to is that the calculation method of the starting point and the end point is always starting from 0 degrees and extending clockwise. There is no such thing as forward and reverse. Clockwise and counterclockwise are just the directions in which arcs are drawn. This not only prevents confusion from going back and forth, but also makes calculations easier. However, using counterclockwise flexibly can sometimes be useful. In the above example, our starting angles are all 0. Now let’s try other starting angles, such as 90 degrees.

Copy code

The code is as follows:


ctx.arc(400,400,20,Math .PI*2/4,Math.PI*2 Math.PI);


If our starting point is 90 degrees and the end point is also 90 degrees, the result is that nothing can be drawn, so I put the end point The angle was changed to 180 degrees, and finally the graph below was obtained.

Question: If we draw a complete circle from a starting point other than 0 degrees, is it okay? Of course you can, as long as you set the end point of the arc to the 360-degree starting angle, such as:

Copy code

Code As follows:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2 Math.PI*2/4); //The starting point is 90 degrees, the end point is 360 90 Degree
However, this approach is just looking for trouble, and normal people would not use it.
Summary: The arc method of Canvas is a way to draw a positive arc. It can only draw positive arcs and cannot draw other strange arcs, such as S-shape - although I like it best S-shaped.