HTML canvas ImageData dataСвойство

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

Примеры

Создайте объект ImageData размером 100*100 пикселей, в котором каждый пиксель установлен в красный цвет:

Canvas

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);

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

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

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают свойство data объекта ImageData.

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

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

Свойство data возвращает объект, содержащий данные изображения указанного объекта ImageData.

Для каждого пикселя в объекте ImageData имеется четыре элемента информации, а именно значения RGBA:

R — красный (0-255)
G — зелёный (0-255)
B — синий (0-255)
A - альфа-канал (0-255; 0 — прозрачный, 255 — полностью видимый)

Информация о цвете/альфа-канале существует в форме массива и хранится в свойстве data объекта ImageData.

Пример:

Синтаксис для окрашивания первого пикселя в объекте ImageData в красный цвет:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Синтаксис для окрашивания второго пикселя в объекте ImageData в зелёный цвет:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Совет:Пожалуйста, обратитесь кcreateImageData()、 getImageData()иputImageData()метод, чтобы узнать больше об объекте ImageData.

Синтаксис JavaScript

Синтаксис JavaScript:	imageData.data;

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

HTMLТег