Metodo HTML canvas drawImage()

Immagine da utilizzare:

L'urlo

Esempio

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

Supporto browser

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

Method
drawImage()	4.0	9.0	3.6	4.0	10.1

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.

Sintassi JavaScript

Posiziona l'immagine sulla tela:

sintassi JavaScript:	contesto .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:

JavaScript:

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:

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