Canvas : courbes de Bézier cubiques

Les courbes

Redimensionnez la fenêtre et à chaque fois "actualisez".
Un message vous indique que les dimensions du canevas sont 300 par 150 ...

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

Le code CSS

@media screen and (min-width: 900px) {canvas {width : 600px ; height : 400px; }} @media screen and (max-width: 899px) {canvas {width : 300px ; height : 200px; }}

Le canevas fait 600 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".

Le code HTML

Il devient basique. La balise CANVAS n'a plus d'attributs puisque les dimensions de cette boîte sont définies via le CSS.

<canvas></canvas>

Le script

	...
	canevas = document.querySelector('canvas'); 
	contexte = canevas.getContext('2d');
	// canevas référence la balise canvas
	var X=canevas.width;
	var Y=canevas.height;
	alert("dimensions canevas : "+ X + " " + Y + " "+ typeof(X)) ;
	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(); 
	...

Il y a dans le script j'ai inséré une boîte de dialogue alert() qui retourne "dimensions canevas : 300 150 number" quelque soient les dimensions réelles du canevas (600 sur 400 ou 300 par 200).
En effet les dimensions du canevas sont définies ici via le CSS et non pas via les attributs width, height de la balise CANVAS.
Donc ce cas les instructions canevas.width et canevas.height retournent toujours : 300 et 150.
Mais ce n'est pas génant : on crée ainsi un système de coordonnées indépendant de la taille réelle du canevas ! L'équivalent du viewBox en SVG ...

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. En effet pour les deux courbes les ordonnées des points de départ et d'arrivée sont Y/2 alors que l'ordonnée du premier point aimant est inférieur à Y/2 et l'ordonnée du deuxième point d'inflexion est supérieure à Y/2.
La deuxième courbe (rouge) est davantage "creusée" que par la première. En effet dans la deuxième courbe les ordonnées des points aimants sont plus éloignés de Y/2 que dans la première courbe (noire).


Retour menu