Canvas : courbes de Bézier quadratiques et cubique

Courbes quadratiques

Le script de la page (extraits)

Le canvevas fait 600 par 300.


	canevas = document.querySelector('canvas'); 
	contexte = canevas.getContext('2d');
	var X = canevas.width ; 	var Y = canevas.height ; 
	// les paupières
	contexte.beginPath();
	contexte.moveTo(100,Y/2) ; 
	contexte.quadraticCurveTo(X/2, 10, X-100,Y/2); 
	contexte.moveTo(100,Y/2) ; 
	contexte.quadraticCurveTo(X/2, Y-20, X-100,Y/2); 
	contexte.lineWidth = '4'; 
	contexte.stroke(); 
	// iris de l'oeil
	contexte.beginPath(); 
	contexte.fillStyle = 'skyblue'; 
	contexte.arc(X/2,Y/2,60,0, Math.PI * 2) ; 
	contexte.fill(); 
	// pupille de l'oeil
	contexte.fillStyle ="black"; 
	contexte.beginPath(); 
	contexte.arc(X/2,Y/2,10,0, Math.PI * 2) ; 
	contexte.fill(); 
...

Le canevas fait 600 pixels par 300.

Une courbe quadratique est caractérisée par sa forme parabolique. On peut imaginer une courbe quadratique (ou courbe de Bézier simple) 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 cubiques

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 script de la page

Le canevas fait 900 par 600.

	canevas2 = document.querySelectorAll('canvas')[1]; 
	contexte2 = canevas2.getContext('2d');
	var X2 =canevas2.width;
	var Y2 =canevas2.height;
	// première courbe
	contexte2.beginPath(); 
	contexte2.moveTo(0,Y2/2) ; 
	contexte2.bezierCurveTo(X2/3,Y2/4, X2/3*2,Y2/4*3,X2,Y2/2); 
	// ordonnées des deux points d'inflexion : Y/4 et Y*3/4
	contexte2.stroke(); 
	contexte2.strokeStyle = 'red';
	// deuxième courbe
	contexte2.beginPath(); 
	contexte2.moveTo(0,Y2/2) ; 
	contexte2.bezierCurveTo(X2/3,0,X2/3*2,Y2,X2,Y2/2); 
	// ordonnées des deux points d'inflexion : 0 et Y
	contexte2.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.

Zones de dessin non adaptatives

Réduisez la largeur de la fenêtre !
Les canevas sont rognés puisqu'ils ont pour largeur 600px pour l'un et 900 pour l'autre.

Rassurez vous la technologie Canvas est parfaitement compatible avec le "responsive web design". Visitez la page suivante pour avoir la solution.
Retour menu