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

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

Ваш браузер не поддерживает HTML5 тег canvas.

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

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

Ваш браузер не поддерживает HTML5 тег canvas.

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

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

Ваш браузер не поддерживает HTML5 тег canvas.

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:

Ваш браузер не поддерживает HTML5 тег 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);