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.
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
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