Canvas - dostęp do tablicy pikseli i operowanie na nich w JavaScript

Stronę tą wyświetlono już: 2338 razy

Wstęp

Dostęp do poszczególnych pikseli bitmapy związanej z canvas-em umożliwia wykonywanie wielu ciekawych animacji. Kilka przykładów takich animacji można zobaczyć w projektach umieszczonych w dziale Programowanie → Projekty JavaScript.

Dane rysowane na canvas-ie są przechowywane jako tablica pikseli. Na każdy piksel przydzielono 32-bity, które podzielone na cztery ośmiobitowe wartości dają kolejne składowe bitmapy:

czerwony - pierwszy bajt z 32-bitowej wartości koloru;
zielony - drugi bajt z 32-bitowej wartości koloru;
niebieski - trzeci bajt z 32-bitowej wartości koloru;
alfa - czwarty bajt z 32-bitowej wartości koloru, określający przezroczystość tego koloru (0 - całkowita przezroczystość, 255 - brak przezroczystości)

Pobieranie pikseli canvas-u

Dobranie się do pikseli canvas-u jest prostsze aniżeli odebranie dzieciakowi lizaka i odbywa się za pomocą metody getImageData, która zwraca obiekt zawierający tablicę liczb 8-bitowych, gdzie każde cztery elementy tejże tablicy opisują kolor pojedynczego piksela. Oto przykładowy sposób użycia tejże metody:

Listing 1

var canvas = document.getElementById("canvasBits");
var ctx = canvas.getContext("2d");
var imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height); // metoda getImageData przyjmuje współrzędne obszaru prostokątnego, z jakiego ma być pobrana tablica danych

Operowanie na bitach koloru

Mając dostęp do obiektu zawierającego tablicę kolorów pikseli można spokojnie zacząć się bawić zmianą ich ustawienia. Oto prosty przykład, w którym zakłada się, że canvas ma wymiary 255x255 i operuje się na poszczególnych składowych względem współrzędnych koloru danego piksela:

Listing 2

for(var x = 0; x < 255; x++){
for(var y = 0; y < 255; y++){
imagedata.data[x * 4 + 255 * 4 * y] = x % 255; // zmiana składowej czerwonej na wartość odpowiadającą współrzędnej x
imagedata.data[x * 4 + 1 + 255 * 4 * y] = y % 255; // zmiana składowej zielonej na wartość odpowiadającą współrzędnej y
imagedata.data[x * 4 + 2 + 255 * 4 * y] = 255; // ustawienie koloru niebieskiego na maksymalną wartość
imagedata.data[x * 4 + 3 + 255 * 4 * y] = 255; // ustawienie braku przezroczystości
}
}

Można też wykonywać operację na całej tablicy bez uwzględnienia współrzędnych piksela:

Listing 3

fot(var i = 0; i < image.data.length; i+=4){
imagedata.data[i] = i % 255;
imagedata.data[i + 1] = i % 255;
imagedata.data[i + 2] = i % 255;
imagedata.data[i + 3] = 255;
}

Przenoszenie tablicy bitów na canvas

Kolejną ważną metodą umożliwiającą przeniesienie tablicy bitów na canvas jest metoda putImageData:

Listing 4

ctx.putImageData(imagedata, 0, 0); // metoda przyjmuje obiekt zawierający dane oraz współrzędne wstawienia tych danych na canvas-ie

Składając wszystko w całość, oto przykład:

Listing 5

window.onload = function(){
var canvas = document.getElementById("canvasBits");
var ctx = canvas.getContext("2d");
var imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var x = 0; x < 255; x++){
for(var y = 0; y < 255; y++){
imagedata.data[x * 4 + 255 * 4 * y] = x % 255; // zmiana składowej czerwonej na wartość odpowiadającą współrzędnej x
imagedata.data[x * 4 + 1 + 255 * 4 * y] = y % 255; // zmiana składowej zielonej na wartość odpowiadającą współrzędnej y
imagedata.data[x * 4 + 2 + 255 * 4 * y] = 255; // ustawienie koloru niebieskiego na maksymalną wartość
imagedata.data[x * 4 + 3 + 255 * 4 * y] = 255; // ustawienie braku przezroczystości
}
}
ctx.putImageData(imagedata, 0, 0);
}