Метод drawImage()HTML canvas
Объект CanvasИзображение для использования:
Пример
Нарисуйте изображение на canvas:
JavaScript：
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Попробуйте сами »
Поддержка браузеров
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 | Необязательно. Высота используемого изображения (растянуть или сжать изображение). |
Другие примеры
Пример
Разместите изображение на холсте, а затем укажите ширину и высоту изображения:
JavaScript：
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
Попробуйте сами »
Пример
Обрежьте изображение и разместите обрезанную часть на холсте:
JavaScript：
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);
Попробуйте сами »
Пример
Видео для использования (нажмите кнопку воспроизведения, чтобы запустить демонстрацию):
Canvas:
JavaScript (каждые 20 миллисекунд код рисует текущий кадр видео):
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);
Попробуйте сами »
Другие расширения