Canvas : courbe de Bézier animée

Le code correspondant

Le HTML

<canvas width ="900" height ="450" style ="width : 80% ; height : auto ;"></canvas>

Le script

Donc pour le script le canevas fait 900 par 450 pixels.
Extrait du script :

	...
	 var X = canevas.width ; var Y = canevas.height; 
	 var i = 0; // variable fonction du temps
	 var sens = 1 ; 
	 setInterval(animate,50); 
	 function animate() 
	 {
		contexte.clearRect(0,0,X,Y); 
		var y = Math.abs(Y -i) ; // y : ordonnée du point de départ et d'arrivée de la courbe
		// avec la fonction abs : y est toujours positif 
		contexte.beginPath();
		contexte.moveTo(0,y); // ordonnée du point d'origine est y 
		contexte.bezierCurveTo(X/3, 0, 2*X/3, Y, X, y); 
		// les coordonnées des points aimants ne changent pas 
		contexte.lineWidth = '2' ; 		
		contexte.stroke();
		if (i==Y) sens = -1;
		if (i==0) sens = 1 ; 
		i = i +sens ; 
	} // fin fonction animate
...

Commentaire

Pour le script les dimensions du canevas sont 900 par 450.

Les coordonnées des points d'inflexion ainsi que les abscisses des points de départ et d'arrivée ne changent pas !
Ce qui change ce sont les ordonnées du point de départ et du point d'arrivée qui sont désignées par la variable y.
La valeur de y est égal à la valeur absolue de (Y - i). Donc y est toujours positif !
La variable i est tantôt incrémentée et tantôt décrémentée via la variable sens qui tantôt vaut 1 et tantôt -1.


Retour menu