HTML canvas drawImage() Method

Obrazek do wykorzystania:

Krzyk

Przykład

Narysuj obraz na płótnie:

JavaScript:

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

Spróbuj sam "

Pomoc Browser

Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje metodę.

metoda
drawImage()	tak	9,0	tak	tak	tak

Definicja i Wykorzystanie

drawImage() Metoda rysuje obraz, płótno, lub film na płótnie.

drawImage() metoda może również zwrócić części obrazu i / lub zwiększenie / zmniejszenie rozmiaru obrazu.

	Uwaga: Nie można połączyć się z drawImage() metodę przed obraz został załadowany. Aby upewnić się, że obraz został załadowany, można zadzwonić drawImage() from window.onload() lub z document.getElementById(" imageID ").onload .

Składnia JavaScript

Umieść zdjęcie na płótnie:

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

Umieść obraz na płótnie, a następnie określ szerokość i wysokość obrazka:

Składnia JavaScript:	context.drawImage(img,x,y,width,height);

Obcięcie obrazu i ustawić przycięte części na płótnie:

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

wartości parametrów

Parametr	Opis	Graj
img	Określa obraz, płótno, lub element wideo do korzystania
sx	Opcjonalny. Współrzędna x, gdzie zacząć wycinek	Graj "
sy	Opcjonalny. Współrzędna y zacząć wycinek	Graj "
swidth	Opcjonalny. Szerokość ściętym obrazu	Graj "
sheight	Opcjonalny. Wysokość przyciętego obrazu	Graj "
x	Współrzędna x, gdzie umieścić obraz na płótnie	Graj "
y	Współrzędna y gdzie umieścić obraz na płótnie	Graj "
width	Opcjonalny. Szerokość obrazu użyć (rozciągnięcie lub zmniejszyć obraz)	Graj "
height	Opcjonalny. Wysokość obrazu użyć (rozciągnięcie lub zmniejszyć obraz)	Graj "

Więcej przykładów

Przykład

Umieść obraz na płótnie, a następnie określ szerokość i wysokość obrazka:

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

Spróbuj sam "

Przykład

Obcięcie obrazu i ustawić przycięte części na płótnie:

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

Spróbuj sam "