HTML5 Canvas - 1.6 Dessiner une courbe quadratique

Une courbe quadratique se dessine avec un seul point de contrôle. Elle prolonge les tracés vus précédemment sur la toile. Cette leçon montre la méthode quadraticCurveTo et le rôle de ses quatre valeurs.

La méthode quadraticCurveTo

La méthode quadraticCurveTo prend quatre valeurs. Les deux premières sont les coordonnées X et Y du point de contrôle. Les deux dernières sont les coordonnées X et Y du point d'arrivée.

Dans la démonstration, la couleur du trait est définie en rouge avant le tracé.

context.strokeStyle = 'red';
context.quadraticCurveTo(<controle-x>, <controle-y>, <arrivee-x>, <arrivee-y>);
context.stroke();

Vérifier le résultat

Ouvrez la page dans le navigateur. La courbe apparaît en rouge et suit les coordonnées choisies.

La leçon suivante dessine une courbe de Bézier, qui utilise deux points de contrôle au lieu d'un.

En résumé

quadraticCurveTo dessine une courbe avec un point de contrôle et un point d'arrivée. La couleur du trait se définit avec strokeStyle, avant le tracé avec stroke. La courbe de Bézier, vue ensuite, en ajoute un second point de contrôle.

Points clés

• quadraticCurveTo prend un point de contrôle et un point d'arrivée.
• Les quatre valeurs se lisent dans l'ordre : contrôle X, contrôle Y, arrivée X, arrivée Y.
• strokeStyle définit la couleur du trait.
• stroke doit être appelé pour afficher la courbe.

Questions fréquentes

Combien de points de contrôle a une courbe quadratique ?

Un seul point de contrôle, défini par ses deux premières coordonnées.

Quelle différence avec la courbe de Bézier ?

La courbe quadratique a un point de contrôle, alors que la courbe de Bézier en a deux.

Pourquoi ma courbe ne s'affiche-t-elle pas ?

Vérifiez que stroke est appelé après le tracé et que l'identifiant de la toile est correct.