Metodo drawImage() su canvas HTML
Definizione e uso
drawImage() Il metodo drawImage() disegna un'immagine, un canvas o un video sulla superficie di disegno.
drawImage() Il metodo può anche disegnare parti di un'immagine e / o aumentare o ridurre le dimensioni dell'immagine.
Esempio
Esempio 1
Immagine da utilizzare:
Disegnare l'immagine sul canva in alto:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10);
Suggerimento:Più esempi disponibili nella parte inferiore della pagina.
Sintassi
Sintassi JavaScript 1
Posizionare l'immagine sul canva:
context.drawImage(img,x,y);
Sintassi JavaScript 2
Posizionare l'immagine sul canva e specificare le dimensioni dell'immagine:
context.drawImage(img,x,y,width,height);
Sintassi JavaScript 3
Tagliare l'immagine e posizionare la parte tagliata sul canva:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Valore del parametro
| Parametro | Descrizione |
|---|---|
| img | Specificare l'immagine, il canva o il video da utilizzare. |
| sx | Opzionale. Posizione x di inizio del taglio. |
| sy | Opzionale. Posizione y di inizio del taglio. |
| swidth | Opzionale. Larghezza dell'immagine tagliata. |
| sheight | Opzionale. Altezza dell'immagine tagliata. |
| x | Posizione x dell'immagine sul canva. |
| y | Posizione y dell'immagine sul canva. |
| width | Opzionale. Larghezza dell'immagine da utilizzare (estendere o ridurre l'immagine): |
| height | Opzionale. Altezza dell'immagine da utilizzare (estendere o ridurre l'immagine): |
Più esempi
Esempio 2
Posizionare l'immagine sul canva e specificare le dimensioni dell'immagine:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10, 240, 160);
Esempio 3
Tagliare l'immagine e posizionare la parte tagliata sul canva:
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);
Esempio 4
Video da utilizzare (premi il pulsante di riproduzione per iniziare la dimostrazione):
Canva:
JavaScript (ogni 20 millisecondi, il codice disegna il fotogramma corrente del video):
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);
Supporto dei browser
I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
