Comment créer une animation avec la balise HTML5 Canvas - les nuls

Bien que la balise canvas HTML5 ne remplace pas Flash comme mécanisme d'implémentation de jeux et d'animations dans le navigateur, il est relativement facile d'ajouter une image de toile. La clé est d'utiliser les fonctionnalités d'animation déjà intégrées dans le navigateur.

Structure de base de la boucle d'animation dans le canevas HTML5

Une animation nécessite généralement une organisation spéciale appelée boucle d'animation . La structure de base de la boucle d'animation fonctionne de la même manière dans toutes les langues:

Initialisation.

Créez les actifs, y compris l'arrière-plan et l'un des objets que vous utiliserez. Les objets qui seront manipulés en temps réel sont normalement appelés sprites . Généralement, ceci est fait lors de la première exécution du programme, pour gagner du temps lors de l'exécution principale. Vous pouvez également définir des constantes pour la taille d'image, la taille d'affichage, la fréquence d'images et d'autres valeurs qui ne changeront pas pendant l'exécution du jeu.
Détermine une fréquence d'images.

Les animations et les jeux fonctionnent en appelant une fonction plusieurs fois à un taux prescrit. En JavaScript, vous utilisez généralement la fonction setInterval () pour spécifier une fonction répétée. La fréquence d'images indique la fréquence à laquelle la fonction spécifiée sera appelée. Les jeux et animations fonctionnent généralement à des fréquences d'images comprises entre 10 et 30 images par seconde. Une fréquence d'images plus rapide est plus lisse, mais peut ne pas être maintenable avec du matériel.
Évaluer l'état actuel.

Chaque sprite est vraiment un élément de données. Au cours de chaque image, déterminez si quelque chose d'important s'est produit: L'utilisateur a-t-il appuyé sur une touche? Est-ce qu'un élément est censé bouger? Est-ce qu'un sprite a quitté l'écran? Deux sprites se sont-ils contigus?
Modifier les données d'image-objet.

Chaque image-objet a généralement des données de position ou de rotation qui peuvent être modifiées pendant chaque image. Habituellement, cela se fait par le biais de transformations (traduction, rotation et échelle), bien que vous puissiez parfois passer d'une image à l'autre.
Effacer l'arrière-plan.

Une animation est vraiment une série d'images tirées rapidement au même endroit. Habituellement, vous devez effacer l'arrière-plan au début de chaque image pour effacer l'image de la dernière image.
Redessiner tous les sprites.

Chaque image-objet est redessinée à l'aide de ses nouvelles données. Les sprites semblent se déplacer parce qu'ils sont dessinés dans un nouvel emplacement ou orientation.

Création des constantes d'une fonction d'animation dans le canevas HTML5

La construction d'un programme qui fait tourner une image dans un canevas nécessite plusieurs lots de code. Le premier travail consiste à configurer les différentes variables et constantes qui décrivent le problème.Le code suivant est créé en dehors des fonctions, car il décrit les valeurs qui seront partagées entre les fonctions:

dessin var; var con; var goofyPic; var angle = 0; CANV_HEIGHT = 200; CANV_WIDTH = 200; SPR_HEIGHT = 50; SPR_WIDTH = 40;

La variable de dessin se référera à l'élément canvas. La variable con sera le contexte de dessin, goofyPic est l'image à faire pivoter et l'angle sera utilisé pour déterminer la rotation actuelle de l'image. Les autres valeurs sont des constantes utilisées pour décrire la hauteur et la largeur du canevas ainsi que l'image-objet.

Déploiement de l'animation dans le canevas HTML5

Utilisez le mécanisme Body Onload pour démarrer du code dès que la page est chargée. Cependant, la page a maintenant deux fonctions. La fonction init () gère l'initialisation et la fonction draw () sera appelée à plusieurs reprises pour gérer l'animation réelle. Voici le code de la fonction init ():

function init () {drawing = document. getElementById ("dessin"); con = dessin. getContext ("2d"); goofyPic = document. getElementById ("goofyPic"); setInterval (draw, 100);} // end init

Le travail de la fonction init () est d'initialiser les choses. Dans cet exemple particulier, divers éléments (le canevas, le contexte et l'image) sont chargés dans des variables JavaScript et l'animation est configurée. La fonction setInterval () est utilisée pour configurer la boucle d'animation principale. Il faut deux paramètres:

Une fonction répétable: Le premier paramètre est le nom d'une fonction qui sera appelée plusieurs fois. Dans ce cas, la fonction de tirage sera appelée plusieurs fois.
Une valeur de délai: Le deuxième paramètre indique la fréquence à laquelle la fonction doit être appelée en millisecondes (1/1000 de seconde). Un délai de 100 crée une fréquence d'images de 10 images par seconde. Un retard de 50 entraînera une fréquence d'images de 20 images par seconde, et ainsi de suite.

Donner une animation à l'image en cours dans le canevas HTML5

La fonction draw () sera appelée plusieurs fois de suite. En général, sa tâche consiste à effacer le cadre, à calculer de nouveaux états d'image-objet et à redessiner l'image-objet. Voici le code:

function draw () {// clear background con. fillStyle = "blanc"; con. fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH); // Dessine la bordure con. strokeStyle = "rouge"; con. lineWidth = "5"; con. strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT); // change l'angle de l'angle de rotation + =. 25; if (angle> Math. PI * 2) {angle = 0;} // démarre un nouveau système de transformation con. enregistrer(); con. traduire (100, 100); con. tourner (angle); // Dessine l'image con. drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT); con. restore ();} // end draw

Bien que le code puisse sembler un peu impliqué, il ne fait vraiment rien de neuf:

Effacer l'arrière-plan.

Rappelez-vous que l'animation est répétée. Si vous ne désactivez pas l'arrière-plan au début de chaque image, vous verrez les dessins d'image précédents. Utilisez la fonction clearRect () du contexte pour dessiner un nouvel arrière-plan ou l'un des autres outils de dessin pour utiliser une image d'arrière-plan plus complexe.
Dessinez un contenu quelconque.

Par exemple, vous pouvez utiliser strokeStyle, lineWidth et strokeRect () pour créer un cadre rectangulaire rouge autour du canevas. Notez que les constantes CANV_HEIGHT et CANV_WIDTH se réfèrent à la taille du canevas en cours.
Modifiez l'état de l'image-objet.

Pour modifier l'angle de rotation de l'image dans l'exemple, la variable appelée angle a été créée en dehors de la fonction. (Il est important que l'angle ait été créé en dehors du contexte de la fonction afin qu'il puisse conserver sa valeur entre les appels à la fonction.) Vous pouvez ensuite ajouter une petite quantité pour faire un angle sur chaque image.

Chaque fois que vous modifiez une variable (en particulier dans une boucle pratiquement infinie comme une animation), vous devez vérifier les conditions aux limites. La plus grande valeur d'angle admissible (en radians) est deux fois pi. Si l'angle devient plus grand que cela, il se réinitialise à zéro.
Construire une transformation. Configurez une nouvelle transformation avec la méthode save () et utilisez les fonctions rotate () et translate () pour transformer un système de coordonnées temporaire.

Beaucoup d'animations sont vraiment des modifications d'une transformation. L'image ne change pas, juste la transformation qui contient l'image.
Dessine l'image au centre de la nouvelle transformation.

La commande drawImage () dessine l'image en fonction du coin supérieur gauche d'une image. Si vous dessinez l'image à (0, 0) de la nouvelle transformation, l'image tournera autour de son coin supérieur gauche. Habituellement, vous voulez qu'une image tourne autour de son point central. Dessinez simplement l'image pour que son centre soit à l'origine. Définissez X sur zéro moins la moitié de la largeur de l'image et Y sur zéro moins la moitié de la hauteur de l'image.
Fermez la transformation. Utilisez la méthode restore () pour terminer la définition du système de coordonnées temporaire.