Médiaforma

Des images dans un canvas

Print Friendly

Cette rubrique va vous montrer comment utiliser la fonction drawImage() pour insérer une image dans un canevas. Selon l’effet recherché, vous pouvez transmettre trois ou cinq paramètres à la fonction drawImage() :

  • drawImage(image, x, y); affiche l’image aux coordonnées x, y ;
  • drawImage(image, x, y, largeur, hauteur); affiche l’image aux coordonnées x, y en lui donnant la largeur et la hauteur spécifiées.

Voici le code utilisé :

Le premier bouton déclenche l’exécution de la fonction JavaScript afficheImage() et le deuxième l’exécution de la fonction JavaScript agranditAfficheImage().

Examinons la fonctin afficheImage().

Après avoir récupéré le contexte du canevas, une nouvelle image est définie et stockée dans la variable img :

var img = new Image();

L’instruction suivante indique le nom de l’image :

img.src = ‘chien.png’;

Il ne reste plus qu’à charger l’image en demandant l’exécution de la fonction drawImage() lorsque l’image est chargée :

img.onload = function(){

ctxt.drawImage(img, 10, 10);

}

Examinons la fonction agranditAfficheImage().

Cette fonction est en tout point similaire à la précédente, si ce n’est que cinq paramètres sont passés à la fonction drawImage() pour afficher une version agrandie de l’image. L’image sera affichée aux coordonnées 10, 100 et fera 150 pixels sur 150 :

ctxt.drawImage(img, 10, 100, 150, 150);

Voici le résultat dans Internet Explorer :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply