Retourner ' la page d'accueil de TJSRetourner ' 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])

Compatible tous navigateurs

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 1 : 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
QUERY 10
SELECT *, DATE_FORMAT(dt_insert, '%d/%m/%Y %H:%i' ) AS jour_insert, DATE_FORMAT(dt_maj, '%d/%m/%Y %H:%i' ) AS jour_maj FROM js_reference ORDER BY IDfather, name
SELECT * FROM js_navigateur ORDER BY ordre
SELECT * FROM js_version ORDER BY ID
SELECT * FROM js_reference WHERE phpfile="canvasrenderingcontext2d.drawimage"
UPDATE js_reference SET nb_visi=nb_visi+1, nb_visi_delai=nb_visi_delai+1 WHERE ID='331'
SELECT * FROM js_navigateur ORDER BY ordre
SELECT js_equivalent_ressource.*, js_equivalent_language.language, js_equivalent_language.favico FROM js_equivalent_ressource, js_equivalent_language WHERE js_equivalent_ressource.idLanguage = js_equivalent_language.id AND js_equivalent_ressource.etat=1 AND js_equivalent_language.etat=1 AND js_equivalent_ressource.typeof='REF' AND js_equivalent_ressource.idRessource="331"
SELECT * FROM js_exemple WHERE ID='331' ORDER BY ordre
SELECT * FROM js_url WHERE ID='331' ORDER BY ordre
SELECT * FROM js_url WHERE ID='308' ORDER BY ordre

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 17/06/2025 17:51:46 sur php 7 en 43.28 ms