In the article on canvas drawing lines, I talked about the method of drawing straight lines. This article on drawing curves should have been published long ago, but because canvas drawing curves are quite special, I haven't figured them out yet, so I have to try them step by step.
One of the difficulties in drawing curves in canvas is that it has 4 functions of curves! They are arc, arcTo, quadratic CurveTo, 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 of arc is as follows :context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
I'll explain his parameters, that is
arc(center x, center y, radius, starting angle, ending angle, or whether it is counterclockwise)
What should we do if we draw a complete circle with arc? Everyone noticed that there is a starting angle and an end angle in the parameters. If our starting angle is 0 and the end angle is 360, isn’t it a perfect circle?
Correct solution! But it should be noted that the angle here is represented by radians (and so is Flash). A complete circle is 360 degrees, which is 2PI radians.
So we write this :ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();
Like lineTo, arc is also a path to draw, so we have to call the fill or stroke method behind it to show the figure (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 earlier, the angle of 360 degrees is 2PI radians, then the angle of 10 degrees is 2PI/360=PI/180 radians, then 90 degrees is 2PI/360*90=PI/2 radians (please calculate other angles by yourself).
ctx.arc(400,400,20,0,Math.PI*2/4);
From the figure, we can determine that the 0 degree of arc is the commonly used 0 degree in mathematics, but the angle is opened clockwise by default, which is opposite to the mathematical model (related to the coordinates, because the canvas coordinates are also opposite to the mathematical coordinates).
But isn't there a parameter in front of it that determines whether it is counterclockwise? How about we set him to true?
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 you should pay attention to is that the calculation method of the starting point and the end point is always based on 0 degrees and extends clockwise, and there is no saying that the cisco and the opposite is true. The counterclockwise is just the direction of the arc.
This not only prevents confusion from going back and forth, but also makes it easier to calculate.
However, flexible use of counterclockwise is sometimes useful.
In the example above, our starting angle is 0. Now let’s try other starting angles, such as 90 degrees.
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 90 degrees, then the result is that nothing can be drawn, so I changed the end point angle to 180 degrees and finally got the figure in the figure below.
Question : If we draw a complete circle from a non-0 degree starting point, is it OK? Of course, it is also possible, as long as you set the end point of the arc to 360 degrees + the starting angle, such as: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 degrees
However, this approach is purely a matter of finding trouble without any trouble, and normal people will not use it.
Summary : Canvas' arc method is to draw regular arcs, and you can only draw regular arcs, and you cannot draw other strange arcs, such as S-shaped - although I like S-shaped the most.