data¶
Свойство data
возвращает объект, содержащий данные изображения заданного объекта ImageData
.
Информация по каждому пикселю в объекте ImageData
состоит из четырех частей, RGBA значений:
R
- Красный цвет (0-255)G
- Зеленый цвет (0-255)B
- Синий цвет (0-255)A
- Альфа-канал (0-255; 0 - прозрачный, 255 - полностью видимый)
Примечание: Чтобы больше узнать об объекте ImageData
, см. справку по методам createImageData()
, getImageData()
и putImageData()
.
Синтаксис¶
imageData.data;
Спецификация¶
Примеры¶
Пример 1¶
Синтаксис, чтобы сделать первый пиксель объекта 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
Пример 2¶
Создадим объект ImageData размером 100*100 пикселей, у которого все пиксели будут красного цвета:
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)
Ссылки¶
- Свойство
data
MDN (рус.)