Метод Canvas drawImage()

Руководство по 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>.

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