Zielony Smok

HTML5 canvas – tutorial

Macierz obrazu

Każdy obraz można przedstawić jako macierz punktów składającą się z rzędów i kolumn.

Macierz obrazu

Nasz obrazek składa się z 4 rzędów i 4 kolumn, czyli ma rozmiar 4 x 4 = 16 pikseli.

Podając położenie komórki w macierzy podajemy współrzędne (rząd, kolumna), w których leży dana komórka. Jednak przy pracy z obrazami współrzędne piksela podajemy jako (x,y), gdzie x jest położeniem piksela od lewej strony obrazka w prawo, a y położeniem piksela od góry obrazka w dół, czyli dokładnie odwrotnie jak w macierzy matematycznej, czy tablicach dwuwymiarowych.

Nie ma to większego znaczenia ponieważ tutaj dane obrazów zapisujemy w tablicy 1-wymiarowej.

Gdyby informacje o każdym pikselu były zapisane w postaci jednej liczby (tak jest na przykład w języku Java) nasza tablica opisująca obraz miałaby taki wygląd:

Zapis macierzy obrazu

Jednak w JavaScript dane każdego piksela zapisane są w czterech kolejnych komórkach 1-wymiarowej tabeli, które podają w kolejności składowe koloru:

  1. r – (red) składnik czerwony
  2. g – (green) składnik zielony
  3. b – (blue) składnik niebieski
  4. a – (alpha) transparentność

Każdy ze składników jest liczbą od 0 do 255

W metodach tworzących kolor składnik alpha podajemy w postaci liczby zmiennoprzecinkowej od 0.0 do 1.0 (0 do 255)

Nasza tablica wygląda zatem tak:

Zapis macierzy obrazu

W operacjach na obrazach możemy dokonywać zmiany danych poszczególnych pikseli. Operacje na pikselach i związane z nimi iteracje pokażemy w następnych wpisach.