Метод createImageData() объекта HTML canvas

Руководство по HTML5 Canvas

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

createImageData() Метод создает новый пустой объект ImageData. По умолчанию значение пикселей объекта - прозрачный черный.

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

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

Таким образом, прозрачный черный представляет собой (0,0,0,0).

Color/alpha существует в виде массива, и так как массив содержит информацию о каждом пикселе, размер массива вчетверо больше, чем размер объекта ImageData. (Есть более простой способ получить размер массива, это использовать ImageDataObject.data.length)

Массив, содержащий информацию о цвете/alpha, хранится в свойстве data свойство.

Совет:После того как вы выполните операции с цветом/alpha в массиве, вы можете использовать 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;

Пример

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

Ваш браузер не поддерживает тег HTML5 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);

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

Синтаксис

Существует две версии метода createImageData():

1. Создание нового объекта ImageData с указанными размерами (в пикселях):

var imgData=context.createImageData(width,height);

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

var imgData=context.createImageData(imageData);

Значение параметра

Параметр Описание
width Ширина объекта ImageData, измеренная в пикселях.
height Высота объекта ImageData, измеренная в пикселях.
imageData Другой объект ImageData.

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Комментарий:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Руководство по HTML5 Canvas