Свойство данных ImageData холста HTML

Пример

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

Холст

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (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);

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

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

Property
data	Yes	9.0	Yes	Yes	Yes

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

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

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

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

Информация о цвете/альфа-канале содержится в массиве и сохраняется в свойстве данных объекта 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:	данные изображения .данные ;

❮ Справочник по холсту HTML