Tutoriel Canvas - sommaire

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

Animation d'un courbe quadratique

Exemple

Le code correspondant

Le canevas 'responsive' fait 300 par 200.
Le JS :

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(); 
	} 
	setInterval(cycle,50); 
	function cycle()
	{
		contexte.clearRect(0,0, X,Y) ; 
		cercles(); // appel 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  ; 
	}
}
quadratique();

Dans la fonction cercles on dessine le centre de l'oeil.
La fonction animate 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 animate 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.

Courbe de Bézier animée

Exemple

Le code correspondant

Le canevas 'responsive' fait 900 par 450.
Le JS :

function cubique()
{
	 var canevas = ...			// référence le deuxième canevas
	 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 ; 
	} 
} // fin fonction cubique
cubique(); 

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.

Remarque

Dans les deux scripts j'utilise les mêmes noms de variables : canevas, contexte, X, Y et pourtant ça ne pose pas de problème car ces variables sont définies au sein de fonctions ; elles sont donc locales !

Animation d'une ellipse

Ci-dessous un document HTML comprenant un canevas.
Dans ce document une ellipse est animée.
Attention l'animation se termine au bout de quelques secondes ; actualisez alors la page pour la relancer.
Affichez la console pour observez les variations des variables rx,ry et opacite.

L'ellipse est de plus en plus grande et de plus en plus opaque.

Le code de ce document HTML

La structure :
• une instruction HTML basée sur la balise Canvas
• un programme principal avec appel d'une fonction d'animation selon un intervalle de temps
• description d'une fonction d'animation

Les ellipses successives sont dessinées en fonction de X et Y (dimensions du canevas).
Avantage : même si vous modifiez les valeurs des attributs width & height de la balise canvas, vous n'avez pas à modifier le script !
Les instructions "console.log" sont provisoires.

Je rappelle aussi comment on met fin à une animation. Il faut référencer l'instruction "setInterval()" via une variable (ici "stop") et dans la fonction d'animation il faut écrire "clearInterval(stop)" en résultat d'un test.