Metodo HTML canvas drawImage()

❮ Riferimento tela HTML

Immagine da utilizzare:

L'urlo

Esempio

Disegna l'immagine sulla tela:

Il tuo browser non supporta il tag canvas HTML5.

JavaScript:

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
};

Supporto del browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.

Method
drawImage() Yes 9.0 Yes Yes Yes

Definizione e utilizzo

Il metodo drawImage() disegna un'immagine, una tela o un video sulla tela.

Il metodo drawImage() può anche disegnare parti di un'immagine e/o aumentare/ridurre le dimensioni dell'immagine.

Nota: non puoi chiamare il metodo drawImage() prima che l'immagine sia stata caricata. Per assicurarti che l'immagine sia stata caricata, puoi chiamare drawImage() da window.onload() o da document.getElementById(" imageID ").onload.

Sintassi JavaScript

Posiziona l'immagine sulla tela:

JavaScript syntax: context.drawImage(img,x,y);

Posiziona l'immagine sulla tela e specifica la larghezza e l'altezza dell'immagine:

JavaScript syntax: context.drawImage(img,x,y,width,height);

Ritaglia l'immagine e posiziona la parte ritagliata sulla tela:

JavaScript syntax: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Valori dei parametri

Parameter Description Play it
img Specifies the image, canvas, or video element to use  
sx Optional. The x coordinate where to start clipping
sy Optional. The y coordinate where to start clipping
swidth Optional. The width of the clipped image
sheight Optional. The height of the clipped image
x The x coordinate where to place the image on the canvas
y The y coordinate where to place the image on the canvas
width Optional. The width of the image to use (stretch or reduce the image)
height Optional. The height of the image to use (stretch or reduce the image)

Altri esempi

Esempio

Posiziona l'immagine sulla tela e specifica la larghezza e l'altezza dell'immagine:

Il tuo browser non supporta il tag canvas HTML5.

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);
};

Esempio

Ritaglia l'immagine e posiziona la parte ritagliata sulla tela:

Il tuo browser non supporta il tag canvas HTML5.

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);
};

Esempio

Video da utilizzare (premi Riproduci per avviare la dimostrazione):

Tela:

Il tuo browser non supporta il tag canvas HTML5.

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);

❮ Riferimento tela HTML