HTML холст drawImage() Метод
Изображение для использования:
Пример
Нарисуйте изображение на холсте:
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() из окна. 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); |
|---|
Другие Примеры
Пример
Поместите изображение на холсте и укажите ширину и высоту изображения:
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);
};
Пример
Видео для использования (нажмите Play, чтобы начать просмотр):
Холст:
JavaScript (код рисует текущий кадр видео каждые 20 миллисекунд):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;
v.addEventListener('play',function() {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);
❮ HTML Справка на полотно