Metoda HTML canvas drawImage ()

Aby użyć zdjęcia:

Krzyk

Przykłady

Aby narysować obrazek na górze płótnie:

JavaScript:

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

Spróbuj »

Pomoc Browser

Internet Explorer 9, Firefox, Opera, Chrome i Safari wsparcie drawImage () metoda.

Uwaga: 8 i wcześniejsze wersje programu Internet Explorer nie obsługuje <canvas> elementu.

Definicja i Wykorzystanie

drawImage () w celu narysowania obrazu, wideo lub płótno na płótnie.

Niektóre fragmenty do drawImage () metoda może również zwrócić obraz i / lub zwiększyć lub zmniejszyć rozmiar obrazu.

Składnia JavaScript

Umieszczenie obrazu na płótnie:

Składnia JavaScript:	Ramy .drawImage (img, x, y);

Pozycjonowanie obraz na płótnie i określonej wysokości i szerokości obrazka:

Składnia JavaScript:	Kontekst .drawImage (img, x, y, szerokość, wysokość);

Cut obrazu i zlokalizować część cięte na płótnie:

Składnia JavaScript:	Kontekst .drawImage (img, sx, sy, swidth, sheight, x, y, szerokość, wysokość);

parametr Wartość

parametry	opis
img	Z góry określony obraz, płótno lub film, który chcesz użyć.
sx	Opcjonalne. Zacznij cięcia x współrzędną.
sy	Opcjonalne. Zacznij wycięte y współrzędne.
swidth	Opcjonalne. Jest to szerokość obrazu cięcia.
sheight	Opcjonalne. Wysoce wyciąć obraz.
x	położenie obrazu na płótnie Place współrzędna x.
y	Umieść y współrzędne położenia obrazu na płótnie.
szerokość	Opcjonalne. Aby użyć szerokość obrazu (poprzez rozciąganie lub zmniejszanie obrazu).
wysokość	Opcjonalne. Wysokość obrazu, który ma być używany (przez rozciąganie lub zmniejszanie obrazu).

Więcej przykładów

Przykłady

Na płótnie pozycjonowanie obrazu, a następnie określić szerokość i wysokość obrazka:

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

Spróbuj »

Przykłady

Wyciąć zdjęcie, a na płótnie o ściętych części są umieszczone:

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

Spróbuj »