Méthode drawImage() du canevas HTML
Définition et utilisation
drawImage() La méthode drawImage() dessine une image, un canevas ou une vidéo sur le canevas.
drawImage() La méthode peut également dessiner certaines parties de l'image, ainsi que/ou augmenter ou diminuer la taille de l'image.
Exemple
Exemple 1
Image à utiliser :
Dessiner une image sur le tableau en haut :
JavaScript :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
Astuce :Plus d'exemples sont disponibles en bas de page.
Syntaxe
Syntaxe JavaScript 1
Localiser l'image sur le tableau :
context.drawImage(img,x,y);
Syntaxe JavaScript 2
Localiser l'image sur le tableau et définir la largeur et la hauteur de l'image :
context.drawImage(img,x,y,width,height);
Syntaxe JavaScript 3
Couper l'image et localiser la partie coupée sur le tableau :
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| img | Définir l'image, le tableau ou la vidéo à utiliser. |
| sx | Optionnel. Position x de début du découpage. |
| sy | Optionnel. Position y de début du découpage. |
| swidth | Optionnel. Largeur de l'image coupée. |
| sheight | Optionnel. Hauteur de l'image coupée. |
| x | Position x de l'image sur le tableau. |
| y | Position y de l'image sur le tableau. |
| width | Optionnel. Largeur de l'image à utiliser. (Étendre ou réduire l'image) |
| height | Optionnel. Hauteur de l'image à utiliser. (Étendre ou réduire l'image) |
Plus d'exemples
Exemple 2
Localiser l'image sur le tableau et définir la largeur et la hauteur de l'image :
JavaScript :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
Exemple 3
Couper l'image et localiser la partie coupée sur le tableau :
JavaScript :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);
Exemple 4
Vidéo à utiliser (appuyez sur le bouton lecture pour commencer la démonstration) :
Tableau :
JavaScript (chaque 20 millisecondes, le code dessine le cadre actuel de la vidéo) :
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()}
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Les versions d'Internet Explorer 8 et antérieures ne prennent pas en charge l'élément <canvas>.
