Immagine da usare:
Esempio
Disegnare l'immagine sulla tela:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); Prova tu stesso " Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e l'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.
JavaScript Syntax
Posizionare l'immagine sulla tela:
| 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 ) ; |
|---|
Clip 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 | Opzionale. La coordinata x dove cominciare clipping | Gioca " |
| sy | Opzionale. coordinata y dove cominciare clipping | Gioca " |
| swidth | Opzionale. La larghezza dell'immagine ritagliata | Gioca " |
| sheight | Opzionale. 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 | Opzionale. La larghezza dell'immagine da utilizzare (stretch or reduce the image) | Gioca " |
| height | Opzionale. L'altezza dell'immagine da utilizzare (stretch or reduce the image) | Gioca " |
Altri esempi
Esempio
Posizionare l'immagine sulla tela, e specificare la larghezza e l'altezza dell'immagine:
JavaScript:
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
Clip l'immagine e posizionare la parte ritagliata sulla tela:
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); Prova tu stesso " Esempio
Video da utilizzare (press Play to start the demonstration) :
Tela:
JavaScript (il codice disegna il fotogramma corrente del video ogni 20 millisecondi):
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); Prova tu stesso " <Oggetto Tela