Płótno HTML Metoda drawImage()

Obraz do użycia:

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

Obsługa przeglądarki

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

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Definicja i użycie

Metoda drawImage() rysuje obraz, kanwę lub wideo na kanwie.

Metoda drawImage() może również rysować części obrazu i/lub zwiększać/zmniejszać rozmiar obrazu.

Uwaga: Nie można wywołać metody drawImage() przed załadowaniem obrazu. Aby upewnić się, że obraz został załadowany, możesz wywołać drawImage() z window.onload() lub z document.getElementById(" imageID ").onload.

Składnia JavaScript

Umieść obraz na płótnie:

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

Umieść obraz na płótnie i określ szerokość i wysokość obrazu:

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

Przytnij obraz i umieść przyciętą część na płótnie:

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

Wartości parametrów

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)

Więcej przykładów

Przykład

Umieść obraz na płótnie i określ szerokość i wysokość obrazu:

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

Przykład

Przytnij obraz i umieść przyciętą część 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);
};