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