Accueil

Traduction

Tutoriel Canvas - sommaire

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Canvas : courbes quadratiques et courbes de Bézier

Avec L'API Canvas on peut réaliser de superbes courbes quadratiques et courbes de Bézier.

Courbes quadratiques

Le script de la page (extraits)

Le canvevas fait 600 par 300 pour le script (attributs width & height de la balise CANVAS)

Le canevas fait 600 pixels par 300.

Une courbe quadratique est caractérisée par sa forme parabolique. On peut imaginer une courbe quadratique comme un segment de métal déformé car attiré vers un point qu'il ne touche jamais : point aimant.

Les deux courbes quadratiques ont les mêmes coordonnées pour les points de départ et d'arrivée et pour l'abscisse du point d'inflexion. Seul l'ordonnée du point d'inflexion change : 10 pour la première courbe qui est donc creusée vers le haut et 190 pour la deuxième courbe qui est donc creusée vers le bas.

Canvas : courbes de Bézier

Ci-dessous un canevas avec deux courbes de Bézier.
Notez que l'une des courbes est plus creusée que l'autre.

Deux courbes de Bézier qui ont le même point de départ et le même point d'arrivée.
Les abscisses des deux points de contrôle sont identiques. Par contre les ordonnées sont différentes.

Le script de la page

Les attributs width & height de la balise CANVAS font respectivement 900 et 600.

Une courbe de Bézier se caractérise par deux points aimants (ou points d'inflexion ou encore point de contrôle) à la différence de la courbe quadratique qui n'en a qu'un.

Pour comprendre le fonctionnement d’une telle courbe, il faut imaginer un segment de métal qui sous l'effet des deux aimants se courbe. Donc si les ordonnées des deux points d'inflexion sont opposées les deux courbures sont aussi opposées. Ce qui est le cas ici.

Ici j'ai exprimé les paramètres des courbes de Bézier en fonction de X et Y.
La courbe rouge est plus creusée que la noire car l'écart entre les ordonnées des deux points aimants est plus fort : écart Y/2 (3*Y/4 -Y/4) pour la noire et Y (Y-0) pour la rouge.