drawImage()¶
Метод drawImage()
рисует изображение, содержимое другого элемента <canvas>
или видео.
Также, метод drawImage()
может нарисовать часть изображения и/или увеличить/уменьшить размер изображения.
Внимание: Нельзя вызывать метод drawImage()
прежде, чем изображение будет загружено. Чтобы убедиться, что изображение было загружено, вызов метода drawImage()
можно поместить внутри события window.onload()
или document.getElementById("imageID").onload
.
Синтаксис¶
Вывод изображения в заданной позиции на холсте:
context.drawImage(img, x, y);
Вывод изображения в заданной позиции на холсте и определение его ширины и высоты:
context.drawImage(img, x, y, width, height);
Обрезание изображения и вывод обрезанной части в заданную позицию:
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
- Необязательный параметр. Применяемая высота изображения (можно растянуть или сжать изображение)
Спецификация¶
Примеры¶
Изображение для примера:
Пример 1¶
Нарисовать изображение на холсте:
JavaScript:
window.onload = function () {
var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
var img = document.getElementById('scream')
ctx.drawImage(img, 10, 10)
}
Пример 2¶
Поместим изображение в заданную позицию на холсте и определим его ширину и высоту:
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)
}
Пример 3¶
Обрежем изображение и поместим обрезанную часть в заданную позицию на холсте:
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)
}
Пример 4¶
Используемое видео (нажмите Play, чтобы начать демонстрацию):
Элемент canvas:
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
)
Ссылки¶
- Метод
drawImage()
MDN (рус.)