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

Stronę tą wyświetlono już: 1027 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
  1. var canvas = document.getElementById("canvasBits");
  2. var ctx = canvas.getContext("2d");
  4. 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
  1. for(var x = 0; x < 255; x++){
  2. for(var y = 0; y < 255; y++){
  3. imagedata.data[x * 4 + 255 * 4 * y] = x % 255; // zmiana składowej czerwonej na wartość odpowiadającą współrzędnej x
  4. imagedata.data[x * 4 + 1 + 255 * 4 * y] = y % 255; // zmiana składowej zielonej na wartość odpowiadającą współrzędnej y
  5. imagedata.data[x * 4 + 2 + 255 * 4 * y] = 255; // ustawienie koloru niebieskiego na maksymalną wartość
  6. imagedata.data[x * 4 + 3 + 255 * 4 * y] = 255; // ustawienie braku przezroczystości
  7. }
  8. }

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

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

Przenoszenie tablicy bitów na canvas

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

Listing 4
  1. 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
  1. window.onload = function(){
  2. var canvas = document.getElementById("canvasBits");
  3. var ctx = canvas.getContext("2d");
  5. var imagedata = ctx.getImageData(0, 0, canvas.width, canvas.height);
  6. for(var x = 0; x < 255; x++){
  7. for(var y = 0; y < 255; y++){
  8. imagedata.data[x * 4 + 255 * 4 * y] = x % 255; // zmiana składowej czerwonej na wartość odpowiadającą współrzędnej x
  9. imagedata.data[x * 4 + 1 + 255 * 4 * y] = y % 255; // zmiana składowej zielonej na wartość odpowiadającą współrzędnej y
  10. imagedata.data[x * 4 + 2 + 255 * 4 * y] = 255; // ustawienie koloru niebieskiego na maksymalną wartość
  11. imagedata.data[x * 4 + 3 + 255 * 4 * y] = 255; // ustawienie braku przezroczystości
  12. }
  13. }
  14. ctx.putImageData(imagedata, 0, 0);
  15. }

I jego rezultat:

Tematy powiązane

Komentarze