HTML5 Canvas - 1.9 Dessiner un cœur avec des courbes

Cette leçon réunit les courbes vues précédemment : l'arc de cercle, la courbe quadratique et la courbe de Bézier. Vous les combinez pour dessiner un cœur rouge. C'est un bon exercice pour relier coordonnées et formes.

Rappel des tracés

La méthode arc trace un arc de cercle. Elle attend le centre, le rayon, l'angle de départ et l'angle de fin, exprimés en radians et non en degrés. Un paramètre facultatif indique le sens anti-horaire, mais le sens horaire est utilisé par défaut.

La méthode quadraticCurveTo utilise un point de contrôle et un point d'arrivée. La méthode bezierCurveTo utilise deux points de contrôle et un point d'arrivée.

Dessiner le cœur

Commencez par définir la couleur rouge et une épaisseur de trait de 5. Placez le point de départ à 430 en X et 130 en Y, puis tracez une première courbe de Bézier.

Ajoutez ensuite une courbe quadratique, puis deux courbes de Bézier pour fermer la forme. N'oubliez pas le tracé avec stroke, sinon le cœur ne s'affiche pas.

context.strokeStyle = 'red';
context.lineWidth = 5;
context.moveTo(430, 130);
context.bezierCurveTo(<coordonnees-bezier-1>);
context.quadraticCurveTo(<coordonnees-quadratique>);
context.bezierCurveTo(<coordonnees-bezier-2>);
context.bezierCurveTo(<coordonnees-bezier-3>);
context.stroke();

En résumé

Un cœur se dessine en combinant deux courbes de Bézier et une courbe quadratique. La couleur, l'épaisseur et le point de départ se règlent avant le tracé. Le rendu final s'affiche après l'appel à stroke.

Points clés

• arc attend un centre, un rayon et des angles en radians.
• quadraticCurveTo utilise un point de contrôle, bezierCurveTo en utilise deux.
• Le point de départ se place avant les courbes.
• Le cœur se compose de courbes enchaînées, puis tracé avec stroke.

Questions fréquentes

Pourquoi mélanger deux types de courbes ?

Les deux types donnent des formes différentes. La vidéo combine deux courbes de Bézier et une courbe quadratique pour obtenir le cœur complet.

Pourquoi le cœur n'apparaît-il pas ?

Le tracé doit être terminé par stroke. Sans cet appel, rien ne s'affiche.

Peut-on changer la taille du cœur ?

Oui, en modifiant les coordonnées des points de la forme et l'épaisseur du trait. La vidéo part du point 430 en X et 130 en Y.