Utilisation de chemins pour dessiner des courbes de Bézier du deuxième et du troisième ordre dans les techniques du didacticiel HTML5 Canvas_html5

Dans HTML5 Canvas, vous pouvez utiliser les méthodes suivantes pour dessiner des courbes de Bézier du troisième et du deuxième ordre :

Copier le code

Le code est le suivant :

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

Une courbe de Bézier est une courbe définie sur un plan bidimensionnel par un « point de départ », un « point d'arrivée » et un ou plusieurs « points de contrôle ». Les courbes de Bézier ordinaires du troisième ordre utilisent deux points de contrôle, tandis que les courbes du deuxième ordre n'utilisent qu'un seul point de contrôle.

Pour tracer une courbe de Bézier du second ordre, il suffit de définir les coordonnées du point final et les coordonnées du point de contrôle :

Copier le code

Le code est le suivant :

context.moveTo(0, 0);
context.quadraticCurveTo(100,25,0,50);

Les résultats de l'exécution du code sont les suivants :

La courbe dans l'exemple ci-dessus commence aux coordonnées (0,0) et se termine à (0,50), et les coordonnées du point de contrôle utilisé pour contrôler le dessin de la courbe sont (100,25).

Par rapport aux courbes de deuxième ordre, le dessin des courbes de Bézier de troisième ordre est plus flexible car deux points de contrôle peuvent être définis. Le code suivant dessine une courbe en forme de "S" :

Copiez le code

Le code est le suivant :

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

Note de traduction 1 : concernant les courbes de Bézier, vous pouvez vous référer à l'entrée sur Wikipédia (http://en.wikipedia.org/wiki/Bézier_curve). L'animation qu'elle contient explique bien le mécanisme de génération des courbes de Bézier.

Annotation 2 : actuellement, HTML5 Canvas ne prend en charge que les courbes de Bézier jusqu'au troisième ordre, et les courbes supérieures au quatrième ordre ne sont pas encore prises en charge.