HTML5 Canvas - 1.8 Dessiner une courbe de Bézier

La courbe de Bézier est plus souple que la courbe quadratique, car elle utilise deux points de contrôle. Cette leçon montre comment la tracer avec la méthode bezierCurveTo. Elle prolonge directement la leçon sur les courbes quadratiques.

Les valeurs de bezierCurveTo

La méthode bezierCurveTo reçoit six valeurs. Les deux premières sont les coordonnées X et Y du premier point de contrôle. Les deux suivantes sont celles du second point de contrôle, et les deux dernières celles du point d'arrivée.

Dans la démonstration, la courbe obtenue prend la forme d'une courbe de Bézier, selon les points indiqués.

context.bezierCurveTo(<controle1-x>, <controle1-y>, <controle2-x>, <controle2-y>, <arrivee-x>, <arrivee-y>);

Comparer avec la courbe quadratique

La courbe quadratique n'a qu'un point de contrôle, alors que la courbe de Bézier en a deux. Ce second point rend la forme plus souple.

La leçon suivante combine ces courbes pour dessiner un cœur.

En résumé

bezierCurveTo trace une courbe avec deux points de contrôle et un point d'arrivée, soit six valeurs. Comparée à la courbe quadratique, elle offre une forme plus souple. Elle sert de brique pour dessiner des formes complexes.

Points clés

• bezierCurveTo prend deux points de contrôle et un point d'arrivée.
• Les six valeurs se lisent dans l'ordre : contrôle 1, contrôle 2, arrivée.
• La courbe quadratique n'a qu'un seul point de contrôle.
• Combiner plusieurs courbes permet de dessiner des formes complexes.

Questions fréquentes

Combien de valeurs prend bezierCurveTo ?

Six valeurs : deux pour le premier point de contrôle, deux pour le second, et deux pour le point d'arrivée.

Quelle différence avec quadraticCurveTo ?

quadraticCurveTo utilise un seul point de contrôle, bezierCurveTo en utilise deux, ce qui donne plus de souplesse.

Comment afficher la courbe ?

Appelez stroke après le tracé, puis rechargez la page. Sans cet appel, la courbe ne s'affiche pas.