Insertion d'un "sprite" dans un canevas

Un "sprite" est un personnage inséré dans un décor. Ici il s'agit d'un GIF animé.

Le canevas

Scène vue par un autre plongeur ayant de la buée sur les verres de son masque.

Le code de la page

... <canvas style ="background-image: url(../images/fond1.jpg) ; background-size :cover ;filter : blur(3px); width : 80% ; height : auto ; " > </canvas> <script> // canevas référence la balise CANVAS var X = canevas.width ; var Y = canevas.height; var image = new Image(); image.src = '../images/plongeur2.gif'; var x = 0 ; var y = 0 ; setInterval(animate,100); //appel de la fonction animate tous les 100 millisecondes function animate() { if (x >= X) x = 0 ; else x = x + 2 ; contexte.clearRect(0, 0, X, Y); contexte.drawImage(image,x,Y/4,60,35) ; } // fin fonction animate } // fin fonction anonyme

HTML & CSS

Attention la balise CANVAS n'a pas d'attribut width et height donc pour le script les dimensions du canevas sont 300 et 150 !!!
Le canevas a pour "background" une image matricielle floutée.

Du Javascript

La fonction d'animation est appelée toutes les 100 millisecondes (donc 10 fois par seconde).
Dans cette fonction emploi de la méthode drawImage() qui permet d'insérer une image matricielle existante dans le canevas. Ici est inséré un gif animé avec réduction de sa taille (60 par 35).
Vous pouvez remarquez que les jambes du plongeur ne bougent pas ; l'image gif n'est plus animée !

L'inconvénient de la méthode drawImage lorsqu'elle concerne un gif animé est que ladite animation est perdue.
Retour menu