Tutoriel Canvas - sommaire

Canvas : courbes quadratiques et courbes de Bézier

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

Courbes quadratiques

Le code correspondant

Le canvevas fait 600 par 300 et a l'ID "canevas1".
La fonction JS :

function f1()
{
	canevas = document.getElementById('canevas1');
	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(); 
}
f1(); 	

Le repère cartésien du canevas est 600 par 300 et ce canevas est identifié "canevas1".

Nous avons dessiné un oeil avec trois formes :
• un cercle
• deux courbes de Bezier quadratiques (ou plus simplement : courbes quadratiques)

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.

La méthode quadraticCurveTo utilise quatre paramètres :
• coordonnées X,Y du point aimant (ou point d'inflexion ou encore point de contrôle)
• coordonnées X,Y du point d'arrivée

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 cubiques

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.

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 correspondant

Le repère cartésien du canevas ets 900 par 600. Le canvevas est identifié "canevas2".
La fonction JS :

function f2()
{
	canevas = document.getElementById('canevas2'); 
	contexte = canevas.getContext('2d');
	var X =canevas.width;
	var Y =canevas.height;
	// première courbe
	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';
	// deuxième courbe
	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(); 
}
f2(); 

La méthode bezierCurveTo utilise six paramètres :
• coordonnées X,Y du premier point aimant
• coordonnées X,Y du deuxième point aimant
• coordonnées X,Y du point d'arrivée

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.