Метод drawImage() на канвасе HTML

Руководство по HTML5 Canvas

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

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

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

Пример

Пример 1

Используемое изображение:

tulip

Нарисовать изображение на верхнюю часть канвы:

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

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10);

Попробуйте сами

Совет:Более подробные примеры предоставлены в нижней части страницы.

Синтаксис

JavaScript синтаксис 1

Определить положение изображения на канве:

context.drawImage(img,x,y);

JavaScript синтаксис 2

Определить положение изображения на канве и задать его ширину и высоту:

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

JavaScript синтаксис 3

Вырезать изображение и определить положение вырезанного участка на канве:

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

Значение параметра

Параметр Описание
img Определить используемое изображение, канву или видео.
sx Опционально. X-координата начала вырезания.
sy Опционально. Y-координата начала вырезания.
swidth Опционально. Ширина вырезанного изображения.
sheight Опционально. Высота вырезанного изображения.
x X-координата положения изображения на канве.
y Y-координата положения изображения на канве.
width Опционально. Ширина используемого изображения (растянуть или уменьшить изображение):
height Опционально. Высота используемого изображения (растянуть или уменьшить изображение):

Более подробные примеры

Пример 2

Определить положение изображения на канве и задать его ширину и высоту:

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

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10, 240, 160);

Попробуйте сами

Пример 3

Вырезать изображение и определить положение вырезанного участка на канве:

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

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 90, 80, 20, 20, 90, 80);

Попробуйте сами

Пример 4

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

Канва:

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

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

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()} 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Попробуйте сами

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

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Примечание:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Руководство по HTML5 Canvas