Maison > Article > interface Web > Tutoriel de dessin sur toile html5 (8) — méthode bezierCurveTo pour dessiner des courbes dans les compétences du didacticiel canvas_html5
Dans l'article précédent, j'ai parlé de trois méthodes pour dessiner des courbes dans Canvas : arc, arcTo et quadraticCurveTo. Elles ont toutes une chose en commun, c'est-à-dire. c'est-à-dire que les courbes que vous dessinez ne peuvent aller que d'un côté. La plus grande différence entre le bezierCurveTo dont nous parlons aujourd'hui et eux est qu'il a deux points de contrôle, ce qui signifie que vous pouvez dessiner une courbe en forme de S.
bezierCurveTo, également connue sous le nom de courbe de Bézier, si vous avez appris certains 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 vous expliquer ses paramètres comme d'habitude, (x1,y1) ; est Les coordonnées du point de contrôle 1, (x2, y2) sont les coordonnées du point de contrôle 2 et (x, y) sont les coordonnées de son point final. Comme quadraticCurveTo, ses coordonnées de point de départ sont également prédéfinies par moveTo.
Donc, bezierCurveTo a besoin de 4 points pour tracer une courbe : point de départ, point final, point de contrôle 1, point de contrôle 2. Pour les besoins de l'explication ultérieure, je suppose ici que le point de contrôle 1 correspond au point de départ , et le point de contrôle 2 correspond au point final
Ici, nous devons mentionner à nouveau le vieux problème du dessin sur toile, c'est-à-dire que le dessin de code est entièrement basé sur des suppositions, et vous devez actualiser pour savoir où dessiner.
Je vais continuer la bonne tradition d'avant et tracer quelques lignes auxiliaires pour aider tout le monde à comprendre :
Ici, nous dessinons d'abord une courbe similaire à quadraticCurveTo, penchée uniquement d'un côté. Cette ligne semble « lisse » car les coordonnées x des points de contrôle 1 et 2 sont les mêmes.
Dessinez maintenant une autre courbe en forme de S pour prouver que bezierCurveTo est différent :En fait, changez simplement 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 se trouvent des deux côtés de la ligne de base, une courbe en forme de S sera dessinée ; si elles sont toutes deux d'un côté de la ligne de base, elle aura un effet similaire à quadraticCurveTo.
La situation dans cet exemple est relativement simple. La ligne de base (du point de départ au point final) est verticale. Cependant, dans les applications pratiques, la plupart du temps, notre ligne de base est inclinée et la situation est beaucoup plus compliquée. . Mais essayez-le vous-même