Canvas : courbes de Bézier cubiques

Les courbes

Ci-dessous un canevas avec deux courbes de Bézier cubiques.
Notez que l'une 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 code de la page

... <style> @media screen and (min-width: 900px) {canvas {width : 600px ; height : 400px; }} @media screen and (max-width: 899px) {canvas {width : 300px ; height : 200px; }} </style> ... <body> ... <canvas width ="900" height ="600"></canvas> ... <script> canevas = document.querySelector('canvas'); contexte = canevas.getContext('2d'); var X=canevas.width; var Y=canevas.height; alert("dimensions canevas : "+ X + " " + Y + " "+ typeof(X) +" " + typeof(Y) ); // deux courbes cubiques contexte.beginPath(); contexte.moveTo(0,Y/2) ; contexte.bezierCurveTo(X/3,Y/4, X/3*2,Y/4*3,X,Y/2); // ordonnées des deux points d'inflexion : Y/4 et Y*3/4 contexte.stroke(); contexte.strokeStyle = 'red'; contexte.beginPath(); contexte.moveTo(0,Y/2) ; contexte.bezierCurveTo(X/3,0,X/3*2,Y,X,Y/2); // ordonnées des deux points d'inflexion : 0 et Y contexte.stroke(); ...

CSS : la dimension effective du canevas est 600 pixels par 400 ou 300 par 200 selon la largeur de l'écran.
J'emploie donc les media queries de CSS3. Si ce concept vous est inconnu visitez le site "tutoriel CSS3".

HTML : les valeurs des attributs width et height de la balise CANVAS sont 900 et 600.

Script : Je rappelle que les instructions JS canevas.width et canevas.height retournent toujours les valeurs des attributs width et height de la balise CANVAS (ou par défaut 300 et 150) donc ici elles vont retourner 900 et 600 !

Donc pour le script le canevas fait 900 et 600 tandis que le canevas va s'afficher dans la page conformément aux instructions CSS ...
Donc cette contradiction n'est pas un problème, bien au contraire. Nous avons ainsi un système de coordonnées indépendant de la taille réelle du canevas : L'équivalent du viewBox en SVG en quelque sorte.

Dessiner des courbes de Bezier cubiques avec l'API canvas

Une courbe de Bézier cubique se caractérise par deux points aimants (ou points d'inflexion ou encore point de contrôle) à la différence de la courbe quadratique (un seul point d'inflexion : voir page précédente).

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 non pas directement en fonction de 900 et 600 mais en fonction de X et Y ce qui revient au même ...
Retour menu