Tracer une courbe de Bézier dans une surface donnée dite « toile »
(0,0)
(800,400)
Modifier la trajectoire de la courbe
Validez vos choix !
Le code expliqué
La courbe de Bézier est un autre outil de dessin. Elle ressemble à la courbe quadratique sauf qu’elle exige deux points de contrôle.
La création d’une courbe de Bézier est quasiment identique à celle d’une courbe quadratique. la fonction bezierCurveTo() prend six paramètres, la position x et y du premier point de contrôle, du second point de contrôle et du point final.
Voici comment produire une courbe quadratique :
- Commencez un chemin beginPath(). Les courbes, comme beaucoup de propriétés de dessin, agissent dans le contexte d’un chemin.
- Allez à la position de départ : moveTo(). Cette commande vous place à l’endroit où la courbe commence.
- Utilisez la méthode bezierCurveTo() pour dessiner la courbe. Cette méthode prend en compte quatre paramètres : la position x et y du point de contrôle et la position x et y du point final.
- Fermez le chemin stroke()
- Donnez une couleur avec les commandes strokeStyle et fillStyle.
- Donnez une épaisseur lineWidth.
- Dessinez les points arc(x,y,1,0,2*Math.Pi).
- Donnez une couleur, une épaisseur strokeStyle, fillStyle, lineWidth.
- Attention, veillez à bien terminer ces séquences par fill();.
- Ecrivez un texte fillText(« … », x, y) après avoir préciser la police dans notre cas font = « 10pt sans-serif ».