Canvas - dostęp do tablicy pikseli i operowanie na nich w JavaScript
Stronę tą wyświetlono już: 2978 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:
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:
Można też wykonywać operację na całej tablicy bez uwzględnienia współrzędnych piksela:
Przenoszenie tablicy bitów na canvas
Kolejną ważną metodą umożliwiającą przeniesienie tablicy bitów na canvas jest metoda putImageData:
Składając wszystko w całość, oto przykład:
I jego rezultat:
Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett
Tytuł:
JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych
Autor:
Laurence Lars Svekis, Maaike van Putten, Rob Percival
Tytuł:
JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript
Autor:
Kyle Simpson
Tytuł:
JavaScript dla dzieci dla bystrzaków
Autor:
Chris Minnick, Eva Holland
Tytuł:
Modularny JavaScript dla zaawansowanych
Autor:
Nicolas Bevacqua
Tytuł:
JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi
Autor:
Lynn Beighley
Tytuł:
Matematyka dla programistów JavaScript
Autor:
Jacek Piechota
Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett
Tytuł:
ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript
Autor:
Nicholas C. Zakas
Tytuł:
JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II
Autor:
Simon Timms