Méthode drawImage() de Canvas
Définition et utilisation
drawImage() La méthode 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 réduire la taille de l'image.
instance
Exemple 1
image à utiliser :
dessiner une image sur le canevas :
JavaScript :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
Avis :Plus d'exemples sont disponibles en bas de la page.
grammaire
grammaire JavaScript 1
localiser l'image sur le canevas :
contexte.drawImage(img,x,y);
grammaire JavaScript 2
localiser l'image sur le canevas et définir la largeur et la hauteur de l'image :
contexte.drawImage(img,x,y,width,height);
grammaire JavaScript 3
couper l'image et localiser la partie coupée sur le canevas :
contexte.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
valeur du paramètre
| paramètre | Description |
|---|---|
| img | Définir l'image, le canevas 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 à couper. |
| sheight | Optionnel. Hauteur de l'image à couper. |
| x | Position x de l'image sur le canevas. |
| y | Position y de l'image sur le canevas. |
| width | Optionnel. Largeur de l'image à utiliser (étirer ou réduire l'image). |
| height | Optionnel. Hauteur de l'image à utiliser (étirer ou réduire l'image). |
Plus d'exemples
Exemple 2
Positionner l'image sur le canevas puis 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 une image et positionner la partie coupée sur le canevas :
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 de lecture pour commencer la démonstration) :
Tableau :
JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）：
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 8 et antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.
