html5 Canvas drawing tutorial (7)—The quadraticCurveTo method of drawing curves in canvas

Comment: Today I will talk about drawing curves with quadraticCurveTo method. quadratic means quadratic, that is, the quadratic equation in mathematics. Next, we will introduce the use of quadraticCurveTo method in detail. Interested friends can learn about it.

To be honest, this method is a bit scary, you can first experience it from the name of the function. By the way, I think it is necessary to shorten this function name.

quadratic means quadratic, that is, the quadratic quadratic equation in mathematics. The parameters of ctx.quadraticCurveTo are as follows:

ctx.quadraticCurveTo(x1,y1,x,y);

Where x and y are the coordinates of the end point, and x1 and y1 are the coordinates of the curve control point? What? You ask me where is the starting point? The starting point is determined using moveTo before this.

The reason why I put the coordinates of the control point with serial number 1 is because the function of drawing curves mentioned later has two control points, which are x2 and y2, so I will give a vaccination here first.

The starting point determined by moveTo and the end point determined by quadraticCurveTo itself can be connected into a straight line. Since quadraticCurveTo has only one control point, this control point is either on the left side of the line or on the right side of the line, so quadraticCurveTo can only draw arcs, but still cannot draw an S-shaped line.

For the sake of easy understanding, I will continue to use the method of drawing auxiliary lines in the previous article. The preliminary code is as follows:

var x1=350,

y1 = 250,

x = 400,

y = 500;

ctx.beginPath();

ctx.strokeStyle="#000";

ctx.moveTo(300,300); //Start point

ctx.quadraticCurveTo(x1,y1,x,y); //Real curve

ctx.stroke();

ctx.beginPath();

ctx.strokeStyle = "rgba(255,0,0,0.5)";

ctx.moveTo(300,300);

ctx.lineTo(x1,y1);//This line and the next line are the lines that draw the control point

ctx.lineTo(x,y);

ctx.moveTo(300,300);//The beginning and end points of the curve start and end points

ctx.lineTo(x,y);

ctx.stroke();

Here I have drawn two auxiliary lines, one is the connection line between the starting point and the end point, and the other is the auxiliary line between the starting point and the control point and then to the end point (actually two). The intersection of these two lines is the control point coordinate of quadraticCurveTo.

quadraticCurveTo can only draw curves in arcs, but this arc can be very irregular, which is also an improvement compared to arc and arcTo.

In addition, quadraticCurveTo will not have a reversal like arcTo.

Of course, if you pull the control point very far, the graphics may become unrecognizable to you. Let's try it:

y1 = 950;

I just changed y1 a little larger, and the curve went beyond the range of canvas.

However, the range of curves drawn by quadraticCurveTo can never reach or exceed the coordinates of the control point. We only need to control the control point well, so we don’t have to worry.

I wrote a simple moving example page showing the process of drawing curves in quadraticCurveTo, hoping to help you deepen your understanding:

Please be more inclusive if the code is written ugly.