createImageData()¶
Метод createImageData()
создает новый, пустой объект ImageData
. Пиксели нового объекта по умолчанию имеют значение прозрачного черного цвета.
Информация по каждому пикселю в объекте ImageData
состоит из четырех частей, RGBA значений:
R
- Красный цвет (0-255)G
- Зеленый цвет (0-255)B
- Синий цвет (0-255)A
- Альфа-канал (0-255; 0 - прозрачный, 255 - полностью видимый)
Таким образом, прозрачный черный цвет соответствует значению (0,0,0,0)
.
Информация о цвете/прозрачности храниться в массиве, и так как массив содержит 4 части такой информации для каждого пикселя, размер массива составляет в 4 раза больше размера объекта ImageData
: width*height*4
. (Самый простой способ узнать размер этого массива — воспользоваться выражением ImageDataObject.data.length
)
Массив с информацией о цвете/прозрачности хранится в свойстве data
объекта ImageData
.
Примечание: После манипуляции с информацией о цвете/прозрачности в этом массиве вы можете скопировать эти данные на холст (canvas
) при помощи метода putImageData()
.
Примеры:
Синтаксис, чтобы сделать первый пиксель объекта 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()
:
1. Создает новый объект ImageData
на основе заданного разрешения (в пикселях):
var imgData = context.createImageData(width, height)
2. Создает новый объект ImageData
с теми же разрешениями, что и другой объект ImageData
(при этом данные изображения не копируются):
var imgData = context.createImageData(imageData)
Значения¶
width
- Ширина нового объекта
ImageData
в пикселях height
- Высота нового объекта
ImageData
в пикселях imageData
- Другой объект
ImageData
Спецификация¶
Пример¶
Создадим объект 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)
Ссылки¶
- Метод
createImageData()
MDN (рус.)