Image à utiliser:
Exemple
Dessiner l'image sur la toile:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); Essayez vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Le drawImage() méthode dessine une image, la toile, ou une vidéo sur la toile.
Le drawImage() méthode peut également dessiner les parties d'une image, et / ou augmenter / réduire la taille de l' image.
Syntaxe JavaScript
Positionnez l'image sur la toile:
| syntaxe JavaScript: | context . drawImage( img,x,y ) ; |
|---|
Positionnez l'image sur la toile, et spécifier la largeur et la hauteur de l'image:
| syntaxe JavaScript: | context . drawImage( img,x,y,width,height ) ; |
|---|
Clipser l'image et positionner la partie clipsé sur la toile:
| syntaxe JavaScript: | context . drawImage( img,sx,sy,swidth,sheight,x,y,width,height ) ; |
|---|
Les valeurs des paramètres
| Paramètre | La description | Joue-le |
|---|---|---|
| img | Indique l'image, toile ou élément vidéo à utiliser | |
| sx | Optionnel. Les coordonnées 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 | Les coordonnées 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 (stretch or reduce the image) | Joue-le " |
| height | Optionnel. La hauteur de l'image à utiliser (stretch or reduce the image) | Joue-le " |
autres exemples
Exemple
Positionnez l'image sur la toile, et spécifier la largeur et la hauteur de l'image:
JavaScript:
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180); Essayez vous - même » Exemple
Clipser l'image et positionner la partie clipsé sur la toile:
JavaScript:
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 vous - même » Exemple
Vidéo à utiliser (press Play to start the demonstration) :
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");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var 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 vous - même » <Canvas objet