Свойство Canvas data

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

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

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

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

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

Цвет/алфа существует в виде массива и хранится в объекте ImageData. data Свойства.

Пример:

Синтаксис для изменения первого пикселя объекта 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.

Пример

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

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

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

Грамматика

imageData.data;

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

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

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

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

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