putImageData()¶
Метод putImageData()
помещает данные изображения (из заданного объекта ImageData
) обратно на холст.
Примечание: Чтобы скопировать пиксельные данные заданной прямоугольной области на холсте, используется метод getImageData()
. Для создания нового, пустого объекта ImageData
, используется метод createImageData()
.
Синтаксис¶
context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
Значения¶
imgData
- Определяет возвращаемый на холст объект
ImageData
x
- Координата X, в пикселях, верхнего левого угла объекта
ImageData
y
- Координата Y, в пикселях, верхнего левого угла объекта
ImageData
dirtyX
- Необязательный параметр. Горизонтальное (x) значение, в пикселях, куда поместить изображение на холсте
dirtyY
- Необязательный параметр. Вертикальное (y) значение, в пикселях, куда поместить изображение на холсте
dirtyWidth
- Необязательный параметр. Ширина, используемая, чтобы нарисовать изображения
dirtyHeight
- Необязательный параметр. Высота, используемая, чтобы нарисовать изображения
Спецификация¶
Пример¶
Следующий код копирует пиксельные данные заданной прямоугольной области на холсте при помощи метода getImageData()
, а затем помещает эти данные изображения обратно на холст при помощи метода putImageData()
:
var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 50, 50)
function copy() {
var imgData = ctx.getImageData(10, 10, 50, 50)
ctx.putImageData(imgData, 10, 70)
}
Ссылки¶
- Метод
putImageData()
MDN (рус.)