HTML canvas createImageData()метод

Canvas 对象参考手册Объект Canvas

Пример

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

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

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

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

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают метод createImageData().

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

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

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

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

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

Следовательно, прозрачный чёрный означает (0,0,0,0).

Информация о цвете/альфа-канале хранится в массиве, и поскольку массив содержит четыре фрагмента информации для каждого пикселя, размер массива в четыре раза больше, чем у объекта ImageData: width*height*4. (Есть более простой способ получить размер массива — использовать ImageDataObject.data.length)

Массив, содержащий информацию о цвете/альфа-канале, хранится в свойствеdataобъекта ImageData.

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

Синтаксис JavaScript

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

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

Синтаксис JavaScript: var imgData=context.createImageData(width,height);

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

Синтаксис JavaScript: var imgData=context.createImageData(imageData);

Значения параметров

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

Canvas 对象参考手册Объект Canvas

Другие расширения