Tutoriel Canvas - sommaire

Canvas : animation de courbes de Bézier et d'ellipses

Nous arrivons à la deuxième partie de ce tuto sur l'API Canvas : les animations voire les jeux vidéo.
Dans ce chapitre je vous propose l'animation de courbes quadratique et cubique.

Animation d'un courbe quadratique

Exemple

Appuyez sur une touche pour arrêter l'animation

Le code correspondant

La balise canvas définit un repère de 300 par 200 ; l'attribut ID est absent.

Le script

function quadratique()
{                     
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var yh = 30; var yb = 170 ; 
	var X = canevas.width ; 
	var Y = canevas.height; 
	var delta =1 ;
	function cercles()
	{
		contexte.beginPath(); // dessiner iris
		contexte.fillStyle = 'skyblue'; 
		contexte.arc(150, 100, 25, 0, Math.PI*2);
		contexte.fill(); 
		contexte.beginPath(); //dessiner pupille
		contexte.fillStyle ='black'; 
		contexte.arc(150, 100, 10, 0, Math.PI*2);
		contexte.fill(); 
	} 
	var stop = setInterval(cycle,50); 
	function cycle()
	{
		contexte.clearRect(0,0, X,Y) ; 
		cercles(); // appel de la fonction cercles
		contexte.beginPath() ; // nouveau bridage de l'oeil 
		contexte.moveTo(50,100);
		contexte.quadraticCurveTo(150, yh, 250,100); 
		contexte.quadraticCurveTo(150, yb, 50,100); 
		contexte.lineWidth = 3 ; 
		contexte.stroke(); 
		// nouvelles valeurs y_haut et y_bas pour la passe suivante
		if (yh == 10  ||  yb == 190) { delta = 1 ; } // oeil  ouvert il faut alors le fermer
		if (yh == 50  ||  yb == 150) { delta  = -1 ;} // oeil fermé il faut alors l'ouvrir
		yh = yh + delta  ; yb = yb - delta  ; 
	}
	document.onkeydown =function() {clearInterval(stop); }
}
quadratique();

Avec la fonction cercles on dessine le centre de l'oeil.
La fonction cycle est appelée toutes les 50 millisecondes soit 20 fois par seconde (1000/50 = 20). Vingt images par seconde c'est une bonne fréquence pour une animation.

Dans la fonction cycle on efface le dessin précédent, on appelle la fonction cercles puis on dessine deux courbes quadratiques opposées. Mais à chaque fois les ordonnées des points d'inflexion changent (variables yh et yb).
Pour changer les ordonnées des points d'inflexion on utilise une variable delta qui tantôt vaut 1 et tantôt -1 .
Si l'oeil est ouvert delta devient positif et donc on augmente yh et diminue yb donc on commence à refermer l'oeil.
Si l'oeil est fermé (ou presque) delta devient négatif et donc on diminue yh et augmente yb donc on commence à réouvrir l'oeil.

Notez l'instruction qui met fin à l'animation : document.onkeydown =function() {clearInterval(stop); }

Courbe de Bézier animée

Exemple

Cliquez dans le canevas pour lancer l'animation

Le code correspondant

L'élément canvas définit un repère de 900 par 450 ; l'attribut ID est absent.

Le code JS

document.querySelectorAll('canvas')[1].onclick = function()
{
	 var canevas = ...			// référence le deuxième canevas de cette page
	 var contexte = canevas.getContext('2d');
	 var X = canevas.width ;
	 var Y = canevas.height; 
	 var i = 0; // variable fonction du temps
	 var sens = 1 ; 
	 setInterval(cycle,50); 
	 function cycle() 
	 {
		contexte.clearRect(0,0,X,Y); 
		var y = Math.abs(Y -i) ; // y : ordonnée du point de départ et d'arrivée 
		// 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 ; 
} 

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.

Animation d'une ellipse

Le rendu

Ci-dessous un document HTML comprenant une 'toile'

L'ellipse est de plus en plus grande jusqu'à atteindre comme rayon la moitié de largeur du canevas. Et alors la fonction d'animation est stoppée.

Le code du document

Le code HTML

La balise canvas définit un repère de 600 par 400 ; l'attribut ID est absent.

Le script

Une révision sur la POO ; l'objet créé se nomme d'ailleurs "objet".

	var canevas = document.querySelector('canvas'); 
	var ctx = canevas.getContext('2d');
	var X = canevas.width ;
	var Y = canevas.height; 
	var stop ;
	var objet = {cx: X/2, cy: Y/2, rx: X/8, ry: Y/8, dx : 12, dy : 8, dessin: function () 
		{
			ctx.ellipse(this.cx,this.cy,this.rx,this.ry,0,0,2*Math.PI);
			ctx.strokeStyle = "purple";
			ctx.stroke();
		}, 	
	}; // fin définition

	function animate()
	{
		if (objet.rx >= X/2) clearInterval(stop); 
		// arrêt animation 
		objet.rx = objet.rx + objet.dx;
		objet.ry = objet.ry + objet.dy;
		objet.dessin(); 
	} 	
	canevas.onclick  =function() {stop = setInterval(animate,500); }
	document.onkeydown = function() {ctx.clearRect(0,0,X,Y); }

Notez les deux dernières instruction du script :
• une pour lancer l'animation
• une autre pour effacer le contenu du canevas