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