Comment créer une animation avec la balise canvas HTML5

Bien que le HTML5 toile

tag pourrait ne pas remplacer Flash comme un mécanisme pour la mise en œuvre des jeux et des animations dans le navigateur, il est relativement facile d'ajouter une animation à un toile image. La clé est d'utiliser les fonctions d'animation déjà intégrés dans le navigateur.

La structure de base de la boucle de l'animation dans la toile 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 dans toutes les langues:

1. Initialisation.

   Créer 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, cela se fait lorsque le programme est exécuté en premier, pour gagner du temps lors de l'exécution principale. Vous pouvez également définir des constantes pour taille de l'image, de la taille d'affichage, taux d'armature, et d'autres valeurs qui ne changeront pas pendant l'exécution du jeu.

2. Déterminer un taux de trame.

   Animations et jeux fonctionnent en appelant une fonction de façon répétée à un taux prescrit. En javascript, vous utilisez généralement la setInterval () fonction pour spécifier une fonction répétée. La frame rate indique combien de fois la fonction spécifiée sera appelé. Jeux et animations typiquement fonctionnent à des taux de trame entre 10 et 30 images par seconde. Un taux de trame plus rapide est plus lisse, mais peut-être pas maintenable avec certains matériels.

3. Évaluer l'état actuel.

   Chaque sprite est vraiment un élément de données. Au cours de chaque trame, de déterminer si quelque chose d'important est arrivé: l'utilisateur at appuyez sur une touche? Est un élément censé se déplacer? Un sprite ne quittent l'écran? Ont deux sprites pif dans l'autre?

4. Modifier les données sprite.

   Chaque sprite a généralement la position ou des données de rotation qui peut être modifiée au cours de chaque trame. Habituellement, cela se fait à travers des transformations (translation, rotation, et l'échelle), bien que parfois vous pouvez basculer entre les images à la place.

5. Effacer l'arrière-plan.

   Une animation est vraiment une série d'images tirées rapidement dans le même endroit. Habituellement, vous aurez besoin pour effacer l'arrière-plan au début de chaque trame pour effacer l'image de la dernière image.

6. 
   
   
   
   

   Redessiner tous les sprites.

   Chaque sprite est redessiné utilise ses nouvelles données. Les sprites semblent se déplacer parce qu'ils sont attirés dans un nouvel emplacement ou l'orientation.

Création des constantes d'un long métrage d'animation en toile HTML5

Construire un programme qui tourne une image dans une toile nécessite plusieurs lots de code. Le premier travail est de mettre en place les différentes variables et des constantes qui décrivent le problème. Le code suivant est créé en dehors de toutes les fonctions, car il décrit les valeurs qui seront partagés entre les fonctions:

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

La dessin variable se référer à la toile élément. La escroquerie la variable sera le contexte de dessin, goofyPic est l'image à être entraîné en rotation, et angle sera utilisé pour déterminer la quantité de l'image est actuellement mis en rotation. Les autres valeurs sont des constantes utilisées pour décrire la hauteur et la largeur de la toile ainsi que l'image-objet.

Déploiement de l'animation dans la toile HTML5

Utilisez le onload du corps mécanisme de démarrer un code dès que la page a fini de charger. Toutefois, la page a maintenant deux fonctions. La init () fonction gère l'initialisation et le dessiner() fonction sera appelée à plusieurs reprises pour gérer l'animation réelle. Voici le code dans la init () fonction:

 fonction init () {dessins = document.getElementById ("dessin") - con = drawing.getContext («2D») - goofyPic = document.getElementById ("goofyPic") - setInterval (tirage, 100) -} // Fin Init

Le travail de la init () la fonction est d'initialiser les choses. Dans cet exemple particulier, divers éléments (la toile, le contexte, et l'image) sont chargés dans les variables javascript, et l'animation est mis en place. La setInterval () fonction est utilisée pour régler la boucle de l'animation principale. Il prend deux paramètres:

• Une fonction reproductible: Le premier paramètre est le nom d'une fonction qui sera appelée à plusieurs reprises. Dans ce cas, la dessiner fonction sera appelée plusieurs fois.

• Une valeur de retard: Le deuxième paramètre indique combien de fois la fonction doit être appelée en millisecondes (1/1000 de seconde). Un délai de 100 créera un taux de 10 images par seconde. Un délai de 50 entraînera un taux de 20 images par seconde, et ainsi de suite.

Donner une animation à l'image actuelle dans la toile HTML5

La dessiner() fonction sera appelée plusieurs fois de suite. En général, sa tâche est de nettoyer le cadre, calculer de nouveaux états de sprite, et de redessiner le sprite. Voici le code:

 fonction draw () {// clair backgroundcon.fillStyle = "blanc" -con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH) - // dessiner bordercon.strokeStyle = -con.lineWidth = "5" -con "rouge". strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT) - // modifier la angleangle de rotation + = 0,25, si (angle> Math.PI * 2) {angle = 0 -} // commencer une nouvelle systemcon.save de transformation () - con.translate (100, 100) -con.rotate (angle) - // Dessine l'imagecon.drawImage (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT) -con.restore () -} // tirage final

Bien que le code peut sembler un peu en cause, il ne fait pas vraiment quelque chose de nouveau:

1. Effacer l'arrière-plan.

   Rappelez-vous que l'animation est répétée dessin. Si vous ne désactivez pas l'arrière-plan au début de chaque image, vous verrez les dessins de trame précédente. Utiliser le contexte de clearRect () fonction pour dessiner un nouveau fond, ou l'un des autres outils de dessin pour utiliser une image de fond plus complexe.

2. Dessinez tout contenu nonsprite.

   Par exemple, vous pouvez utiliser strokeStyle, largeur de ligne, et strokeRect () de construire un cadre rectangulaire rouge autour de la toile. On notera que le CANV_HEIGHT et constantes CANV_WIDTH se réfèrent à la taille du support en cours.

3. Modifier l'état de sprite.

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

   Chaque fois que vous modifiez une variable (en particulier dans une boucle sans fin comme un quasi-animation), vous devriez vérifier les conditions aux limites. La plus grande valeur de l'angle admissible (en radians) est deux fois pi. Si l'angle devient plus grande que cela, il est remis à zéro.

4. Construire une transformation. Mettre en place une nouvelle transformation avec le enregistrer() méthode, et d'utiliser le rotate () et translate () fonctions pour transformer un système de coordonnées temporaires.

   De nombreuses animations sont vraiment des modifications d'une transformation. L'image ne change pas, juste la transformation qui contient l'image.

5. Dessinez l'image au centre de la nouvelle transformation.

   La drawImage () commande dessine l'image basée sur le coin supérieur gauche de l'image. Si vous dessinez l'image au (0, 0) de la nouvelle transformation, l'image apparaît à tourner autour de son coin supérieur gauche. Habituellement, vous voulez une image pour tourner autour de son point central. Il suffit de dessiner l'image de sorte que son centre est à l'origine. Set X à zéro moins la moitié de la largeur de l'image, et Y à zéro moins la moitié de la hauteur de l'image.

6. Fermez la transformation. Utilisez le restore () méthode pour terminer la définition du système de coordonnées temporaire.