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

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 3005 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:

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