Последние учебники веб-разработки
 

HTML canvas putImageData() Method

<HTML Canvas Ссылка

пример

Приведенный ниже код копирует данные пикселя для указанного прямоугольника на холсте с 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() да 9.0 да да да

Определение и использование

putImageData() метод помещает данные изображения (от указанного объекта ImageData) обратно на холсте.

Совет: Читайте о getImageData() метод , который копирует данные пикселя для указанного прямоугольника на холсте.

Совет: Читайте о createImageData() метод , который создает новый пустой объект ImageData.


JavaScript Синтаксис

Синтаксис JavaScript: context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight );

Значения параметров

параметр Описание
imgData Задает объект ImageData положить обратно на холст
x Координаты х, в пикселях, левого верхнего угла объекта ImageData
y Y-координату, в пикселях, левого верхнего угла объекта ImageData
dirtyX Необязательный. Значение по горизонтали (х), в пикселях, где поместить изображение на холсте
dirtyY Необязательный. Значение по вертикали (у), в пикселях, где поместить изображение на холсте
dirtyWidth Необязательный. Ширина использовать для рисования изображения на холсте
dirtyHeight Необязательный. Высота использовать, чтобы нарисовать изображение на холсте

<HTML Canvas Ссылка