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

La feuille de style

canvas { background-image: url(../images/fond1.jpg) ; background-size :cover ;filter : blur(3px);} @media screen and (min-width: 900px) {canvas {width : 80% ; height : 400px; }} @media screen and (max-width: 899px) {canvas {width : 80% ; height : 200px; }}

La balise CANVAS a pour fond une image dont la dimension s'adapte à celle du conteneur grace à la propriété background-size :cover.
Comme toute élément HTML de type bloc on peut attribuer à la balise CANVAS une image en guise de "background".

C'est possible mais assez compliqué de réaliser des filtres avec l'API Canvas alors que c'est un jeu d'enfant avec CSS3.
Comme la balise CANVAS est un élément du DOM on peut lui appliquer un filtre CSS.

Le canevas fait 80% de large et 400 ou 200 pixels de haut selon la largeur de l'écran.

Le HTML

Le HTML relatif à l'animation canvas se résume à la balise sans aucun attribut !

Le 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

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