Continuons à parler de la méthode de dessin des courbes dans Canvas. Aujourd'hui, je vais parler de QuadraticCurveto.
Pour être honnête, cette méthode est un peu effrayante, vous pouvez d'abord en faire l'expérience du nom de la fonction. Soit dit en passant, je pense qu'il est nécessaire de raccourcir ce nom de fonction.
Le quadratique signifie quadratique, c'est-à-dire l'équation quadratique quadratique en mathématiques. Les paramètres de ctx.quadraticcurveto sont les suivants:
ctx.quadraticcurveto (x1, y1, x, y);
Où X et Y sont les coordonnées du point final, et x1 et y1 sont les coordonnées du point de contrôle de la courbe? Quoi? Vous me demandez où est le point de départ? Le point de départ est déterminé à l'aide de MoveTo avant cela.
La raison pour laquelle j'ai mis les coordonnées du point de contrôle avec le numéro 1 de série est due au fait que la fonction des courbes de dessin mentionnées plus tard a deux points de contrôle, qui sont x2 et y2, donc je vais d'abord donner une vaccination ici.
Le point de départ déterminé par MoveTo et le point final déterminé par QuadraticCurveto lui-même peuvent être connectés à une ligne droite. Étant donné que QuadraticCurveto n'a qu'un seul point de contrôle, ce point de contrôle est soit sur le côté gauche de la ligne, soit sur le côté droit de la ligne, donc QuadraticCurveto ne peut que dessiner des arcs, mais ne peut toujours pas tracer une ligne en forme de S.
Par souci de compréhension facile, je continuerai à utiliser la méthode de dessin de lignes auxiliaires dans l'article précédent. Le code préliminaire est le suivant:
var x1 = 350,
y1 = 250,
x = 400,
y = 500;
ctx.beginPath ();
ctx.strokestyle = "# 000";
ctx.moveto (300 300); // point de départ
ctx.quadraticcurveto (x1, y1, x, y); // vraie courbe
ctx.stroke ();
ctx.beginPath ();
ctx.strokestyle = "rgba (255,0,0,0,5)";
ctx.moveto (300 300);
ctx.lineto (x1, y1); // cette ligne et la ligne suivante sont les lignes qui dessinent le point de contrôle
ctx.lineto (x, y);
ctx.moveto (300,300); // les points de début et de fin des points de début et de fin de courbe
ctx.lineto (x, y);
ctx.stroke ();
Ici, j'ai tracé deux lignes auxiliaires, l'une est la ligne de connexion entre le point de départ et le point final, et l'autre est la ligne auxiliaire entre le point de départ et le point de contrôle puis au point final (en fait deux). L'intersection de ces deux lignes est la coordonnée du point de contrôle de QuadraticCurveto.
QuadraticCurveto ne peut dessiner des courbes que dans les arcs, mais cet arc peut être très irrégulier, ce qui est également une amélioration par rapport à l'arc et à l'arcto.
De plus, QuadraticCurveto n'aura pas de renversement comme Arcto.
Bien sûr, si vous tirez très loin le point de contrôle, les graphiques peuvent devenir méconnaissables pour vous. Essayons-le:
y1 = 950;
J'ai juste changé Y1 un peu plus grand et la courbe est allée au-delà de la gamme de toile.
Cependant, la plage de courbes dessinées par QuadraticCurveto ne peut jamais atteindre ou dépasser les coordonnées du point de contrôle. Nous n'avons qu'à bien contrôler le point de contrôle, donc nous n'avons pas à nous inquiéter.
J'ai écrit une page d'exemple mobile simple montrant le processus de dessin des courbes dans quadraticcurveto, dans l'espoir de vous aider à approfondir votre compréhension:
Veuillez être plus inclusif si le code est écrit laid.