HTML canvas drawImage() Method

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

Крик

пример

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

JavaScript:

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

Попробуй сам "

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

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

метод
drawImage()	да	9.0	да	да	да

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

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

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

	Примечание: Вы не можете вызвать drawImage() метод до загрузки изображения. Для того, чтобы убедиться , что было загружено изображение, вы можете вызвать drawImage() from 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	Определяет изображение, холст или видео элемент для использования
sx	Необязательный. Координата Х, где начать отсечение	Сыграй "
sy	Необязательный. Координата где начать отсечение	Сыграй "
swidth	Необязательный. Ширина отсеченного изображения	Сыграй "
sheight	Необязательный. Высота отсеченного изображения	Сыграй "
x	Координата Х, где поместить изображение на холсте	Сыграй "
y	Координату, где поместить изображение на холсте	Сыграй "
width	Необязательный. Ширина изображения для использования (стрейч или уменьшить изображение)	Сыграй "
height	Необязательный. Высота изображения для использования (стрейч или уменьшить изображение)	Сыграй "

Еще примеры

пример

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

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

Попробуй сам "

пример

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

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

Попробуй сам "