HTML canvas putImageData()Метод

HTML canvas 参考手册Справочное руководство по 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);
}

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

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

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают метод putImageData().

Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

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

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

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

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

Синтаксис JavaScript

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

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

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

HTML canvas 参考手册Справочное руководство по HTML canvas Другие расширения