Image à utiliser:
Exemple
Dessinez l'image sur la toile:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}; Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| drawImage() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le drawImage() méthode dessine une image, toile, ou la vidéo sur la toile.
Le drawImage() méthode peut également dessiner des parties d'une image, et / ou augmentation / réduire la taille de l' image.
 | Remarque: Vous ne pouvez pas appeler le drawImage() méthode avant que l'image a été chargé. Pour veiller à ce que l'image a été chargée, vous pouvez appeler drawImage() from window.onload() à document.getElementById(" imageID ").onload drawImage() from window.onload() de drawImage() from window.onload() ou à partir de document.getElementById(" imageID ").onload . |
|---|
JavaScript Syntaxe
Positionnez l'image sur le canevas:
| Syntaxe JavaScript: | context.drawImage(img,x,y); |
|---|
Positionnez l'image sur la toile, et de préciser la largeur et la hauteur de l'image:
| Syntaxe JavaScript: | context.drawImage(img,x,y,width,height); |
|---|
Clips l'image et positionner la partie coupée sur la toile:
| Syntaxe JavaScript: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
Paramètre valeurs
| Paramètre | La description | Joue-le |
|---|---|---|
| img | Indique l'image, toile, ou d'un élément vidéo à utiliser | |
| sx | Optionnel. La coordonnée x où commencer écrêtage | Joue-le " |
| sy | Optionnel. La coordonnée y où commencer écrêtage | Joue-le " |
| swidth | Optionnel. La largeur de l'image écrêté | Joue-le " |
| sheight | Optionnel. La hauteur de l'image écrêté | Joue-le " |
| x | La coordonnée x où placer l'image sur la toile | Joue-le " |
| y | La coordonnée y où placer l'image sur la toile | Joue-le " |
| width | Optionnel. La largeur de l'image à utiliser (étirer ou réduire l'image) | Joue-le " |
| height | Optionnel. La hauteur de l'image à utiliser (étirer ou réduire l'image) | Joue-le " |
Autres exemples
Exemple
Positionnez l'image sur la toile, et de préciser la largeur et la hauteur de l'image:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
}; Essayez - le vous - même » Exemple
Clips l'image et positionner la partie coupée sur la toile:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);
}; Essayez - le vous - même » Exemple
Vidéo à utiliser (appuyez sur Play pour démarrer la démonstration):
Toile:
JavaScript (le code dessine l'image actuelle de la vidéo toutes les 20 millisecondes):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;
v.addEventListener('play',function() {i=window.setInterval(function()
{ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); Essayez - le vous - même »