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

Autor podstrony: Krzysztof Zajączkowski

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

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

I jego rezultat:

Propozycje książek