Canvas : variation automatique de la taille d'un carré

Le script (extrait)

Le canevas fait 300 par 300 et a un fond de couleur 'lime' (via la propriété CSS background).
Les variables X et Y représentent toujours les dimensions de la balise canvas.

... 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, 100); function animate() { contexte.clearRect(0, 0, X, Y); // effacement ancien carré contexte.fillStyle ='olive'; contexte.fillRect(x, y, cote, cote); // dessiner carré de fond olive if (cote == X) variation = -1 ; // sens de variation devient négatif if (cote == 10) variation = 1 ; // sens de variation redevient positif cote = cote + variation ; //nouvelle cote du carré 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

Les dimensions de la balise CANVAS sont fixes (300 par 300 pixels).

Comme dans la page précédente une fonction (animate) est appelée à intervalles réguliers (10 fois par seconde).
Cette fonction efface le précédent carré et redessine un nouveau carré avec des côtés et un positionnement x,y 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 et y de l'arête supérieure gauche du carré. Retour menu