[HTML canvas Quadraticcurveto] Canvas drawing quadraticcurveto () attribute study example Demo

To be honest, this method is a bit scary, and can be experienced first from the function name alone. In other words, I think it is necessary to shorten the function name.

Quadratic means two times, that is, the two-dimensional equation in mathematics, that two times. The Ctx.quadraticcurveto parameters are as follows:

Ctx.quadraticcurveto (X1,y1,x,y);

where x, y is the coordinate of the end point, and X1,y1 is the coordinate of the curve control point? What the? You ask me where the starting point is? The starting point is determined by moveto before this.

The reason why I take the coordinates of the control point 1, is because the next one of the curve of the function has two control points, there are x2,y2, so here first to make a preventive needle.

We are determined by the MoveTo starting point and quadraticcurveto self-determined end point, can be connected to a straight line, because Quadraticcurveto only one control point, the control point is not on the left of the line, is in the right side of the line, so, Quadraticcurveto can never draw an arc, or can't draw an S shape.

For the sake of understanding, I still use the method of drawing auxiliary line of previous article. The preliminary code is as follows:

1 2 3 4 5 6 7 8 9 Ten One A - - the - -

var x1=350, Y1=250, X=400, Y=500; CTx.Beginpath(); CTx.Strokestyle="#000"; CTx.MoveTo(300,300);Starting point CTx.Quadraticcurveto(x1, y1XY);Genuine curve CTx.Stroke(); CTx.Beginpath(); CTx.Strokestyle="Rgba (255,0,0,0.5)"; CTx.MoveTo (300,300) CTX. lineto (X1,y1) ;//line and the next line are the lines that draw the control point Ctx.,y CTx. moveto (300,300; Start and end of connection curve Ctx.,y CTx. stroke (

Here I drew two auxiliary lines, one is the starting point and the end of the connection line, one is the starting point to the control point and then to the end of the auxiliary line (in fact, two), the intersection of these two lines is the Quadraticcurveto control point coordinates.

Quadraticcurveto also can only draw curved curve, but this arc can be very irregular, compared to arc and ArcTo, also is a progress.

In addition, the Quadraticcurveto will not be like the arcto, there is a reversal situation.

Of course, if you pull the control point very far, maybe the graph will become you don't know. Let's try it out:

y1 = 950;

I just changed the Y1 a bit, and then the curve went beyond the canvas.

However, Quadraticcurveto draw the range of the curve, can never reach or exceed the coordinates of the control point, we only have to "control" the control point is good, do not worry.

I have written a simple, movable example page that shows the process of drawing a curve in Quadraticcurveto, hoping to help you deepen your understanding:

Canvas Quadraticcurveto Example

Code to write ugly please forgive ...

[HTML canvas Quadraticcurveto] Canvas drawing quadraticcurveto () attribute study example Demo