Метод drawImage()HTML canvas

HTML canvas 参考手册Справочное руководство по HTML canvas

Изображение для использования:

The Scream

Пример

Нарисуйте изображение на canvas:

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

JavaScript：

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

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

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

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают метод drawImage().

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

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

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

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

Синтаксис 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 Необязательно. Высота используемого изображения (растянуть или сжать изображение).

实例

Другие примеры

Пример

Разместите изображение на холсте, затем укажите ширину и высоту изображения:

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

JavaScript：

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

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

Пример

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

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

JavaScript：

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

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

Пример

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

Canvas:

Ваш браузер не поддерживает тег 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,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

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

HTML canvas 参考手册Справочное руководство по HTML canvas Другие расширения