Metodo canvas HTML drawImage ()

Per utilizzare l'immagine:

l'urlo

Esempi

Per tracciare un quadro sulla parte superiore della tela:

JavaScript:

var c = document.getElementById ( "MyCanvas");
var CTX = c.getContext ( "2D");
var img = document.getElementById ( "Scream");
img.onload = function () {
ctx.drawImage (IMG, 10,10);
}

Prova »

Supporto per il browser

Internet Explorer metodo 9, Firefox, Opera, Chrome e Safari supporto drawImage ().

Nota: 8 e versioni precedenti di Internet Explorer non supportano l'elemento <canvas>.

Definizione e utilizzo

drawImage () per disegnare un'immagine, un video o tela sulla tela.

Alcune parti a drawImage () metodo possono anche disegnare l'immagine e / o aumentare o diminuire la dimensione dell'immagine.

sintassi JavaScript

Posizionamento dell'immagine sulla tela:

sintassi JavaScript:	contesto .drawImage (IMG, x, y);

Posizionamento dell'immagine sulla tela, e una larghezza predeterminata e l'altezza dell'immagine:

sintassi JavaScript:	contesto .drawImage (IMG, x, y, larghezza, altezza);

Tagli l'immagine e localizzare la porzione tagliata su tela:

sintassi JavaScript:	contesto .drawImage (IMG, sx, sy, swidth, sheight, x, y, larghezza, altezza);

Valore parametro

parametri	descrizione
img	Predeterminato immagine, tela o il video che si desidera utilizzare.
sx	Opzionale. Iniziare a tagliare la coordinata x della posizione.
sy	Opzionale. Inizia coordinate y tagliare.
swidth	Opzionale. È la larghezza dell'immagine taglio.
sheight	Opzionale. Altamente Tagli l'immagine.
x	Luogo x posizione dell'immagine sulla tela di coordinate.
y	Mettere coordinate y della posizione dell'immagine sulla tela.
larghezza	Opzionale. Per utilizzare la larghezza dell'immagine (allungando o riducendo l'immagine).
altezza	Opzionale. L'altezza dell'immagine che si desidera utilizzare (allungando o riducendo l'immagine).

Altri esempi

Esempi

Sulla tela la posizione delle immagini, quindi specificare la larghezza e l'altezza dell'immagine:

JavaScript:

var c = document.getElementById ( "MyCanvas");
var CTX = c.getContext ( "2D");
var img = document.getElementById ( "Scream");
img.onload = function () {
ctx.drawImage (IMG, 10,10,150,180);
}

Prova »

Esempi

Tagliare l'immagine, e sulla tela delle porzioni tranciate sono posizionati:

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 »