Javascript метод drawImage()

Метод drawImage() рисует изображение, содержимое другого элемента <canvas> или видео.

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

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

JavaScript синтаксис

Вывод изображения в заданной позиции на холсте:

JavaScript синтаксис:	context.drawImage(img, x, y);

Вывод изображения в заданной позиции на холсте и определение его ширины и высоты:

JavaScript синтаксис:	context.drawImage(img, x, y, width, height);

Обрезание изображения и вывод обрезанной части в заданную позицию:

JavaScript синтаксис:	context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

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

Параметр	Описание
img	Определяет используемое изображение, видео или элемент <canvas>
sx	Необязательный параметр. Координата X начальной точки обрезки
sy	Необязательный параметр. Координата Y начальной точки обрезки
swidth	Необязательный параметр. Ширина обрезанного изображения
sheight	Необязательный параметр. Высота обрезанного изображения
x	Координата X на холсте, куда будет помещено изображение
y	Координата Y на холсте, куда будет помещено изображение
width	Необязательный параметр. Применяемая ширина изображения (можно растянуть или сжать изображение)
height	Необязательный параметр. Применяемая высота изображения (можно растянуть или сжать изображение)

Пример использования

Изображение для примера:

Крик

Пример №1

Нарисовать изображение на холсте:

JavaScript:


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

Пример №2

Поместим изображение в заданную позицию на холсте и определим его ширину и высоту:

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

Пример №3

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

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

Пример №4

Используемое видео (нажмите Play, чтобы начать демонстрацию):

Элемент canvas:

JavaScript (код рисует текущий кадр видео каждые 20 миллисекунд):


var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;

v.addEventListener('play',function() {i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);