метод putImageData() HTML canvas

Руководство HTML5 Canvas

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

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

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

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

пример

Ниже приведен код, который копирует像素 данные из указанного прямоугольника на канвас, а затем возвращает изображение данных на канвас с помощью putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

попробуйте сами

грамматика

контекст.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

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

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

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Комментарий:Интернет-браузер Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Руководство HTML5 Canvas