Canvas : animation automatique d'un carré (côté et opacité)

Le carré est de plus en plus grand et opaque puis de plus en plus petit et transparent ; le cycle recommence. Mais le carré est toujours centré dans le canevas.

Le script correspondant (extraits)

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

	var canevas = ...
	var contexte = ...
	var X = canevas.width ; var Y = canevas.height; 
	var opacite =0.1;
	var delta =0.05;
	contexte.fillStyle	 ='olive'; 
    var cote = 10; // valeur initiale du cote du  carré noir
	var variation = 1 ; // valeur initiale de sens de variation
  	var x = (X-cote)/2	;    var y = (Y-cote)/2; // coordonnées initiales de l'arête supérieure gauche du carré
	setInterval(animate,50); 
    function animate()
    {
		contexte.clearRect(0, 0, X, Y); // effacement canevas
		contexte.globalAlpha = opacite;
		contexte.fillRect(x, y, cote, cote); // dessinner carré de fond olive
		if (cote >= X) {variation = -1 ; delta = -0.01; }
		if (cote <= 10) {variation = 1 ; delta =0.01; }
      	cote = cote + variation   ; //nouvelle cote du carré
		opacite = opacite + delta;
		x = (X-cote)/2 ; y = (Y-cote)/2 ; // nouvelles coordonnées de l'arête supérieure gauche du carré
	 } // fin fonction animate

Commentaire du code

Comme dans la page précédente une fonction (animate) est appelée à intervalles réguliers (20 fois par seconde : 1000/50).
Cette fonction efface le précédent carré et redessine un nouveau carré avec un côté, un positionnement et une transparence différents.

La difficulté de cette animation est que le carré doit toujours être centré dans la zone de dessin. Donc dans la fonction animate il faut recalculer à chaque fois les coordonnées x,y de l'arête supérieure gauche du carré.
Retour menu