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

Extension navigateur Get-My-IP

Quelle est mon adresse IP ?Installez l'extension Get-My-IP.com pour afficher votre IP d'un seul clic
Le 17/10/2018 09:52:20 sur php7 en 65.08 ms