HTML5 Animation avec canvas

Pour créer une animation dans HTML5 Pour créer un effet d'animation d'image dans HTML canvas, vous devez dessiner chaque image du cadre, puis passer d'un cadre à l'autre en un temps très court pour former un effet d'animation.

Exemple en ligne

Pour dessiner une animation dans HTML5Pour dessiner une animation sur le canevas, vous devez dessiner et redessiner les cadres de l'animation sur le canevas. Vous devez le faire très rapidement pour que de nombreuses images semblent être une animation.
Pour obtenir les meilleures performances pour l'animation, requestAnimationFrame utilise une fonction de rappel sur l'objet window. Vous pouvez appeler cette fonction et passer une autre fonction à appeler en tant que paramètre lorsque le navigateur est prêt à dessiner le prochain cadre d'animation.
Lorsque le navigateur est prêt à dessiner le prochain cadre, il peut activer l'accelération matérielle pour l'animation en envoyant un signal à l'application et en coordonnant le redessin des cadres avec d'autres activités de redessin dans le navigateur. Comparé à l'utilisation de la fonction setTimeout() en JavaScript pour le timing du dessin des cadres d'animation, l'expérience globale devrait être beaucoup meilleure.
Voici un exemple de code :

function　animate()　{
　　　　reqAnimFrame　=　(window.webkitRequestAnimationFrame　||
　window.mozRequestAnimationFrame　||
　window.oRequestAnimationFrame　||
　window.msRequestAnimationFrame　||
　function(callback)　{
　　var　self　=　this,　start,　finish;
　　return　window.setTimeout(function()　{
　　　start　= 　+new　Date();
　　　callback(start);
　　　finish　= 　+new　Date();
　　　self.timeout　= 　1000/60　-　(terminé　-　start);
　　}, self.timeout);
　});
　　　　reqAnimFrame(animate);
　　　　draw();
}

La fonction animate() obtient d'abord une référence à la fonction requestAnimationFrame(). Notez que ce nom de fonction peut varier d'un navigateur à l'autre. Placez cette variable reqAnimFrame à toutes ces fonctions possibles qui ne sont pas null.
Deuxièmement, la fonction reqAnimFrame() appelle une fonction en passant la fonction animate() en paramètre. Par conséquent, lorsque le navigateur est prêt à dessiner le prochain cadre, il appelle la fonction animate().
Troisièmement, la fonction animate() appelle la fonction draw(). draw() n'est pas montrée dans l'exemple précédent. Ce qu'elle devrait faire est d'abord nettoyer le canvas (ou le nombre de canvases à nettoyer), puis dessiner le prochain cadre de l'animation.
Dans l'exemple précédent, une autre chose n'est pas montrée : animate() doit appeler une fonction une fois pour démarrer l'animation. Sinon, requestAnimationFrame() ne appellera jamais cette fonction et l'animation ne commencera jamais.
Voici un exemple d'animation de déplacement d'un rectangle sur une toile:

Voici le code pour une animation canvas:

<canvas id="ex1" width="500" height="170" style="border:　1px solid #cccccc;">
HTML5　Canvas　not　supported
</canvas>
<script>
var　x　=　0;
var　y　= 　15;
var　speed　= 　5;
function　animate()　{
reqAnimFrame　=　(window.webkitRequestAnimationFrame　||
　window.mozRequestAnimationFrame　||
　window.oRequestAnimationFrame　||
　window.msRequestAnimationFrame　||
　function(callback)　{
　　var　self　=　this,　start,　finish;
　　return　window.setTimeout(function()　{
　　　start　= 　+new　Date();
　　　callback(start);
　　　finish　= 　+new　Date();
　　　self.timeout　= 　1000/60　-　(terminé　-　start);
　　}, self.timeout);
　});
reqAnimFrame(animate);
x　+= speed;
if(x <= 0 || x >=　475{
speed =　-speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, y,　500,　170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y,　25,　25);
}
animate();
</script>