Accueil

Traduction

Tutoriel Canvas - sommaire

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Canvas : animations basiques

Les animations sont certes basiques.

Variation automatique du rayon d'un cercle

L'animation

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

Le code correspondant

Le canevas 'responsive' fait 300 par 300.
Le script (extrait) :

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 variation redevient égal à +1. Donc la variable rayon est incrémentée.

Variation automatique de la taille d'un carré

L'animation

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 code correspondant

Le canevas 'responsive' fait 300 par 300.
Le script (extrait):

Le script est un peu plus compliqué car il faut calculer à chaque fois les nouvelles coordonnées de l'angle haut gauche du carré afin qu'il soit toujours centré.

Variation de l'opacité et de la taille par le visiteur

Cette fois c'est le visiteur qui par clic successifs change l'aspect du rond.

L'animation

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

Le script correspondant

Ce troisième canevas 'responsive' de la page fait toujours 300 par 300.
Le script (extrait) :

J'utilise le constructeur d'objets Path2D pour définir une forme graphique (un rond) en début de script.

Dans ce troisième script de la page on retrouve des variables qui portent le même nom que dans le premier : canevas, contexte, X, Y, rayon, maxi, opacite, variation. Et pourtant il n'y a aucune ambiguïté car ces variables sont définies dans le cadre d'une fonction.