Canvas : animation de cercles

Premier exemple : variation automatique du rayon

Le cercle a un rayon de plus en plus grand puis diminue et le cycle recommence.

Le script correspondant

Les attributs width / height de la balise CANVAS sont respectivement 300 et 300.

	var canevas = document.querySelectorAll('canvas')[0]; 
	var contexte = canevas.getContext('2d');
	var X = canevas.width ; var Y = canevas.height; 
	var maxi = X/2; 
	var rayon = 10; 
	var variation  = 1 ; 
	contexte.fillStyle	 ='orange'; 
	setInterval(animate,100); 
	function animate()
	{
		contexte.clearRect(0,0, X,Y) ; 
		contexte.beginPath(); 
		contexte.arc(X/2, Y/2,rayon, 0, Math.PI*2);
		contexte.fill(); 
		if (rayon >= maxi) variation = -1 ; 
		if (rayon <= 10) variation = 1 ; 
		rayon  = rayon + variation ; 
	} // fin fonction animate
	

Commentaire du code

Au travers de cet exemple simple vous devez comprendre le principe de l'animation automatique dans CANVAS.
Grâce à la fonction setInterval on appelle une fonction nommée animate selon une certaine fréquence (toutes les 100 millisecondes soit 10 fois par seconde).

Dans la fonction animate on efface le précédent rond grâce à la méthode clearRect(0,0,X,Y) puis on crée un nouveau cercle avec un rayon différent.
Dès que le rayon atteint la valeur maxi (moitié de la largeur de Canevas) la variable variation devient égal à -1. Donc la variable rayon est décrémentée.
Dès que le rayon redevient égal à 10 (pixels) variation redevient égal à +1. Donc la variable rayon est incrémentée.

Exemple 2 : variation de l'opacité par le visiteur

Le rond est d'abord très transparent puis à chaque clic dans le canevas il devient de plus en plus opaque.

Le script correspondant

Les attributs width / height de la balise CANVAS sont respectivement 300 et 300.

	var canevas2 = document.querySelectorAll('canvas')[1]; 
	var contexte2 = canevas2.getContext('2d');
	X2 = canevas2.width;
	Y2 = canevas2.height;
	contexte2.fillStyle	 ='purple'; 
	var opacite =0.1;
	var rond2 = new Path2D();
    rond2.arc(X2/2,Y2/2,100,0, 2 * Math.PI);
	contexte2.globalAlpha = opacite;
	contexte2.fill(rond2); 
	canevas2.onclick = function()
		{ 
			contexte2.clearRect(0,0,X,Y);
			contexte2.fill(rond2); 
			opacite = opacite +0.05;
			contexte2.globalAlpha = opacite;
		} 
	

Commentaire

Dans ce deuxième exemple j'utilise le constructeur d'objets Path2D pour définir une forme graphique (un rond) en début de script.
La transparence générale (propriété globalAlpha) du canevas est égale à la valeur de opacite. Cette variable est initialisée à 0.1 !
A chaque clic dans le canevas il y a effacement complet de celui-ci (clearRect(0,0,X2,Y2)) puis remplissage de l'objet graphique avec la couleur et la transparence définis.
Notez que grâce à l'emploi du constructeur Path2D() le code JS est plus succinct.

Remarque générale

Attention il y a dans cette page deux canevas. Donc il faut faire très attention dans le script au niveau des variables ...
Ainsi pour le premier canevas j'utilise les variables canevas, contexte, X, Y, ... Tandis que pour la deuxième zone de dessin j'utilise les variables canevas2, contexte2, X2, Y2, ...
Retour menu