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:
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:
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:
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:
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:
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);
}
