HTML-холст DrawImage метод ()

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

Крик

примеров

Чтобы нарисовать рисунок на верхней части холста:

JavaScript:

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

Попробуйте »

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

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

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

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

DrawImage () метод, чтобы нарисовать изображение, видео или холст на холсте.

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

синтаксис JavaScript

Положение изображения на холсте:

Синтаксис JavaScript:	Контекст .drawImage (IMG, х, у);

Положение изображения на холсте, и заранее определенной ширины и высоты изображения:

Синтаксис JavaScript:	Контекст .drawImage (IMG, х, у, ширина, высота);

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

Синтаксис JavaScript:	Контекст .drawImage (IMG, Sx, Sy, swidth, sheight, х, у, ширина, высота);

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

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

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

примеров

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

JavaScript:

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

Попробуйте »

примеров

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

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

Попробуйте »