Canvas : courbes de Bézier cubiques

Les courbes

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

Code CSS et HTML

... <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> ...

CSS : la dimension d'affichage 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 donc ce sont les dimensions du canevas pour le script. Les variables X et Y vont contenir respectivement 900 et 600.
Pour plus d'explications voir la page précédente : "Canvas et le responsive web design".

Script

	canevas = document.querySelector('canvas'); 
	contexte = canevas.getContext('2d');
	var X=canevas.width;
	var Y=canevas.height;
	// 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(); 

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 cubiques 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.
Retour menu