Commentaires: Arc, Arcto et QuadraticCurveto. Ils ont tous une chose en commun, c'est-à-dire que les courbes qu'ils tirent ne peuvent être biaisées que d'un côté. La plus grande différence entre Beziercurveto mentionné aujourd'hui et ce sont deux points de contrôle, c'est-à-dire que la courbe en forme de S peut être dessinée. Les amis intéressés peuvent en savoir plus.
Dans l'article précédent, j'ai parlé de trois façons de dessiner des courbes dans toile: arc, arcto et quadraticcurveto. Ils ont tous une chose en commun, c'est-à-dire que les courbes qu'ils tirent ne peuvent être biaisées que d'un côté. La plus grande différence entre Beziercurveto et ils sont qu'ils ont deux points de contrôle, c'est-à-dire qu'ils peuvent dessiner une courbe en forme de S.Beziercurveto, qui est la soi-disant courbe de Bezier, si vous avez appris des outils de dessin, vous pouvez le comprendre immédiatement.
La syntaxe de Beziercurveto est la suivante:
ctx.beziercurveto (x1, y1, x2, y2, x, y); Je vais expliquer ses paramètres comme d'habitude. (x1, y1) est la coordonnée du point de contrôle 1, (x2, y2) est la coordonnée du point de contrôle 2, et (x, y) est la coordonnée de son point final. Comme QuadraticCurveto, ses coordonnées de point de départ sont également prédéfinies par MoveTo.
Par conséquent, Beziercurveto dessine une courbe nécessite 4 points: point de départ, point final, point de contrôle 1, point de contrôle 2. Pour le souci d'explication ultérieure, je suppose ici que le point de contrôle 1 correspond au point de départ et au point de contrôle 2 correspond au point final
Ici, nous mentionnerons l'ancien problème du dessin de la toile, ce qui signifie que le dessin de code est basé sur la devinette, et vous devez actualiser le dessin pour comprendre où vous le dessinez.
Je continuerai la belle tradition précédente et dessinerai quelques lignes auxiliaires pour aider tout le monde à comprendre:
var x1 = 450, // la coordonnée x du point de contrôle 1
y1 = 300, // y du point de contrôle 1
x2 = 450, // x du point de contrôle 2
y2 = 500, // y du point de contrôle 2
x = 300, // Point de fin x
y = 500; // point final y
ctx.moveto (300,300); // point de départ
ctx.beginPath ();
ctx.linewidth = 5;
ctx.strokestyle = "rgba (0,0,0,1)"
ctx.moveto (300 300);
ctx.beziercurveto (x1, y1, x2, y2, x, y);
ctx.stroke ();
// commence à dessiner des lignes auxiliaires
ctx.beginPath ();
ctx.strokestyle = "rgba (255,0,0,0,5)";
ctx.linewidth = 1;
// Connectez le point de départ et le point de contrôle 1
ctx.moveto (300 300);
ctx.lineto (x1, y1);
// Connectez le point final et le point de contrôle 2
ctx.moveto (x2, y2);
ctx.lineto (x, y);
// Connectez les points de début et de fin (ligne de base)
ctx.moveto (300 300);
ctx.lineto (x, y);
ctx.stroke ();
Ici, je dessine d'abord une courbe similaire à QuadraticCurveto, qui n'est biaisée que d'un côté. Cette ligne semble être relativement rond car les coordonnées X des points de contrôle 1 et 2 sont les mêmes.
Maintenant, dessinez une courbe en forme de S pour prouver que Beziercurveto est unique:
var x1 = 150;
...
En fait, il suffit de modifier les coordonnées du point de contrôle 1. Si les coordonnées du point de contrôle 1 et du point de contrôle 2 sont respectivement des deux côtés de la ligne de base, une courbe en forme de S est dessinée; Si les deux sont d'un côté de la ligne de base, c'est un effet similaire à QuadraticCurveto.
La situation de cet exemple est relativement simple. La ligne de base (point de départ au point final) est verticale, mais la plupart du temps dans l'application réelle, notre ligne de base est oblique, donc la situation est beaucoup plus compliquée. Mais essayons-le vous-même
Chaque méthode de dessin semble relativement simple en fonction, mais la méthode puissante est combinée par une seule méthode. Dans l'article ultérieur, j'ai essayé d'expliquer certaines méthodes de dessin courantes, telles que les rectangles arrondis et les ellipses. Ils devaient combiner ces méthodes uniques dans le passé.