HTML-холст DrawImage метод ()
HTML холст Справочное руководство
Для использования изображения:
примеров
Чтобы нарисовать рисунок на верхней части холста:
JavaScript:
вар CTX = c.getContext ( "2d");
вар IMG = document.getElementById ( "крик");
img.onload = функция () {
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 | Необязательно. Начало резки координаты Х позиции. | |
| SY | Необязательно. Начните вырезать у координаты. | |
| swidth | Необязательно. Это ширина разрезаемого изображения. | |
| sheight | Необязательно. Высоко вырезать изображение. | |
| х | Место х координат положение изображения на холсте. | |
| Y | Поместите у координаты положения изображения на холсте. | |
| ширина | Необязательно. Для того, чтобы использовать ширину изображения (путем растяжения или усадки изображения). | |
| высота | Необязательно. Высота изображения, которое вы хотите использовать (путем растяжения или усадки изображения). |
Другие примеры
примеров
На полотне позиционирования изображения, а затем указать ширину и высоту изображения:
JavaScript:
вар CTX = c.getContext ( "2d");
вар IMG = document.getElementById ( "крик");
img.onload = функция () {
ctx.drawImage (IMG, 10,10,150,180);
}
Попробуйте »
примеров
Разрежьте картину, и на полотне стригли участков расположены:
JavaScript:
вар CTX = c.getContext ( "2d");
вар IMG = document.getElementById ( "крик");
ctx.drawImage (IMG, 90,130,50,60,10,10,50,60);
Попробуйте »
примеров
Видео вы хотите использовать (нажмите кнопку воспроизведения, чтобы начать демонстрационный пример):
Холст:
JavaScript (каждые 20 миллисекунд, то код будет использовать текущий кадр видео):
вар с = document.getElementById ( "myCanvas");
CTX = c.getContext ( '2d');
v.addEventListener ( 'игра', функция () {вар я = window.setInterval (функция () {ctx.drawImage (v, 5,5,260,125)}, 20);}, ложь);
v.addEventListener ( 'пауза', функция () {window.clearInterval (я);}, ложь);
v.addEventListener ( 'закончилась', функция () {clearInterval (я);}, ложь);
Попробуйте »
HTML холст Справочное руководство