Metoda HTML canvas drawImage()

Obrázek k použití:

Křik

Příklad

Nakreslete obrázek na plátno:

JavaScript:

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

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Definice a použití

Metoda drawImage() nakreslí obrázek, plátno nebo video na plátno.

Metoda drawImage() může také nakreslit části obrazu a/nebo zvětšit/zmenšit velikost obrazu.

Poznámka: Metodu drawImage() nemůžete volat, dokud se obrázek nenačte. Chcete-li zajistit, aby byl obrázek načten, můžete zavolat drawImage() z window.onload() nebo z document.getElementById(" imageID ").onload.

Syntaxe JavaScriptu

Umístěte obrázek na plátno:

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

Umístěte obrázek na plátno a určete šířku a výšku obrázku:

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

Ořízněte obrázek a umístěte oříznutou část na plátno:

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

Hodnoty parametrů

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)

Další příklady

Příklad

Umístěte obrázek na plátno a určete šířku a výšku obrázku:

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

Příklad

Ořízněte obrázek a umístěte oříznutou část na plátno:

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