Изображение использовать:
пример
Нарисуйте изображение на холсте:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); Попробуй сам " Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| drawImage() | 4,0 | 9,0 | 3,6 | 4,0 | 10,1 |
Определение и использование
drawImage() Метод рисует изображения, холст, или видео на холст.
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 | Определяет изображение, холст, или видео элемент для использования | |
| sx | Необязательный. Координаты х, где начать отсечение | Сыграй " |
| sy | Необязательный. Координату, где начать отсечение | Сыграй " |
| swidth | Необязательный. Ширина отсеченного изображения | Сыграй " |
| sheight | Необязательный. Высота отсеченного изображения | Сыграй " |
| x | Координаты х, где поместить изображение на холсте | Сыграй " |
| y | Координата, где поместить изображение на холсте | Сыграй " |
| width | Необязательный. Ширина изображения для использования (stretch or reduce the image) | Сыграй " |
| height | Необязательный. Высота изображения для использования (stretch or reduce the image) | Сыграй " |
Еще примеры
пример
Поместите изображение на холсте, а также указать ширину и высоту изображения:
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); Попробуй сам " пример
Видео для использования (press Play to start the demonstration) , (press Play to start the demonstration) :
Холст:
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); Попробуй сам " <Холст объекта