Доступ к пиксельным данным в HTML Canvas

Можно ли получить цвет определенного пикселя в объекте HTML Canvas? Да, вы можете получать доступ к данным пикселей в HTML Canvas и манипулировать ими, используя различные методы, предоставляемые Canvas API.

Получение цвета пикселя

Чтобы получить цвет пикселя по адресу определенное место на холсте, вы можете использовать метод getImageData(). Этот метод возвращает объект ImageData, который представляет часть холста. Объект ImageData содержит массив данных пикселей, к которым вы можете получить доступ с помощью свойства .data.

Манипулирование пикселями

После получения данных пикселей вы можете манипулировать ими это по желанию. Например, вы можете создать изображение в оттенках серого, преобразовав каждый пиксель в оттенок серого:

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and convert it to grayscale.
for (var i = 0, n = pix.length; i < n; i  = 4) {
  var gray = (pix[i]   pix[i 1]   pix[i 2]) / 3;
  pix[i  ] = gray;
  pix[i 1] = gray;
  pix[i 2] = gray;
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

Используя методы getImageData() и putImageData(), вы можете выполнять различные задачи по манипулированию пикселями, такие как фильтрация изображений, настройка цвета и создание эффектов в HTML. Холст.