Метод рисования холста HTML ()

Изображение для использования:

Крик

Пример

Нарисуйте изображение на холсте:

JavaScript:

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

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Определение и использование

Метод drawImage() рисует изображение, холст или видео на холсте.

Метод drawImage() также может рисовать части изображения и/или увеличивать/уменьшать размер изображения.

Примечание. Вы не можете вызвать метод drawImage() до загрузки изображения. Чтобы убедиться, что изображение загружено, вы можете вызвать drawImage() из window.onload() или из document.getElementById(" imageID ").onload.

Синтаксис JavaScript

Расположите изображение на холсте:

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

Расположите изображение на холсте и укажите ширину и высоту изображения:

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

Обрежьте изображение и расположите обрезанную часть на холсте:

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

Значения параметров

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)

Дополнительные примеры

Пример

Расположите изображение на холсте и укажите ширину и высоту изображения:

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

Пример

Обрежьте изображение и расположите обрезанную часть на холсте:

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