Retourner à la page d'accueil de TJS

Méthode : CanvasRenderingContext2D.drawImage()

          

Affiche une image dans le canvas à l'emplacement (x, y)

Syntaxe
myContext.drawImage(image, x, y, [largeur, hauteur])

Description
Affiche l'image dans le canvas à l'emplacement (x, y).
Il existe d'autres paramètres pour redimensionner à la dimension [largeur, hauteur] et pour cropper l'image avant de l'afficher.


Exemple Affichage d'images dans un canvas
Code source
<canvas id="myCanvas" width="350" height="200" style="background-color:#fff"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

var img1=new Image();
img1.src="media/logo-js.png";
img1.onload=function() {
 console.log(img1.src+" chargée");
 myContext.drawImage(img1, 50, 2);
};

var img2=new Image();
img2.src="media/logo-php.png";
img2.onload=function() {
 console.log(img2.src+" chargée");
 myContext.drawImage(img2, 140, 60);
 myContext.drawImage(img2, 220, 10, 75, 56);
};
</script>

Résultat
Emulation de la console
Explication
Charge une image en mémoire et l'affiche dans le canvas.

Page en rapport
Le tutoriel sur le dessin avec canvas
Page mise à jour le

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 18/11/2017 22:09:46 sur php7 en 26.11 ms