Immagine da utilizzare:
Esempio
Disegnare l'immagine sulla tela:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}; Prova tu stesso " Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| metodo | |||||
|---|---|---|---|---|---|
| drawImage() | sì | 9.0 | sì | sì | sì |
Definizione e utilizzo
Il drawImage() metodo disegna un'immagine, tela, o un video sulla tela.
Il drawImage() metodo può anche disegnare le parti di un'immagine, e / o aumentare / ridurre le dimensioni dell'immagine.
 | Nota: non è possibile chiamare il drawImage() metodo prima che l'immagine è stata caricata. Per garantire che l'immagine è stata caricata, è possibile chiamare drawImage() from window.onload() o da document.getElementById(" imageID ").onload . |
|---|
JavaScript Syntax
Posizionare l'immagine sulle tele:
| sintassi JavaScript: | context.drawImage(img,x,y); |
|---|
Posizionare l'immagine sulla tela, e specificare la larghezza e l'altezza dell'immagine:
| sintassi JavaScript: | context.drawImage(img,x,y,width,height); |
|---|
Agganciare l'immagine e posizionare la parte ritagliata sulla tela:
| sintassi JavaScript: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
valori dei parametri
| Parametro | Descrizione | Gioca |
|---|---|---|
| img | Specifica l'immagine, tela, o elemento video da usare | |
| sx | Facoltativo. La coordinata x dove cominciare clipping | Gioca " |
| sy | Facoltativo. La coordinata y dove cominciare clipping | Gioca " |
| swidth | Facoltativo. La larghezza dell'immagine ritagliata | Gioca " |
| sheight | Facoltativo. L'altezza dell'immagine ritagliata | Gioca " |
| x | La coordinata x dove posizionare l'immagine sulla tela | Gioca " |
| y | La coordinata y dove posizionare l'immagine sulla tela | Gioca " |
| width | Facoltativo. La larghezza dell'immagine da usare (stiramento o ridurre l'immagine) | Gioca " |
| height | Facoltativo. L'altezza dell'immagine da usare (stiramento o ridurre l'immagine) | Gioca " |
Altri esempi
Esempio
Posizionare l'immagine sulla tela, e specificare la larghezza e l'altezza dell'immagine:
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);
}; Prova tu stesso " Esempio
Agganciare l'immagine e posizionare la parte ritagliata sulla tela:
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);
}; Prova tu stesso " Esempio
Video da utilizzare (premere Play per avviare la dimostrazione):
Tela:
JavaScript (il codice disegna il fotogramma corrente del video ogni 20 millisecondi):
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); Prova tu stesso "