Tutoriel Canvas - sommaire

Canvas : courbes quadratiques et courbes de Bézier

Avec L'API Canvas nous pouvons produire de superbes courbes quadratiques et cubiques.

Courbes quadratiques

Le code correspondant

L'élément canvas définit un repère de 600 par 300 ; le canevas est identifié "canevas1" ; une règle de style en ligne pour que le canevas soit 'responsive'.
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(); 	

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

Dans l'exemple 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.

Exemple

Ci-dessous une 'toile' avec deux courbes cubiques.
Notez que l'une des courbes est plus creusée que l'autre.

Il s'agit de 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

L'élément canvas définit un repère de 900 par 600 ; le canevas est identifié "canevas2" ; une règle de style en ligne pour que le canevas soit 'responsive' : 80% de la largeur du parent.

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(); //appel fonction

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

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.

Ce qu'il ne faut pas faire !

Ci-dessous je dessine un troisième canevas qui va être rempli avec un code identique à celui de la fonction f2(). Mais la grande différence est que les attributs width & height sont absents donc le repère fait par défaut 300 par 150.

Le rendu

Les courbes ne sont pas jolies : ressemblent plutôt à une succession de tirets.
Le problème n'est pas lié au script mais au faible nombre de pixels de cette 'toile' : 300 par 150.

Le code

Conclusion

Code HTML : évitez l'omission des attributs width & height dans la balise canvas
Au contraire pour un beau rendu, n'hésitez pas à donner des valeurs importantes à ces deux attributs.

Script : exprimer les positions et dimensions des formes en fonction de X & Y , variables qui reprennent les dimensions du repère cartésien.
Ainsi le script sera toujours valide même si vous modifiez à postériori les valeurs des attributs width & height.