Canvas - dostęp do tablicy pikseli i operowanie na nich w JavaScript
Stronę tą wyświetlono już: 2338 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;
- }
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:

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

Tytuł:
HTML,CSS i JavaScript dla każdego. Wydanie VII
Autor:
Laura Lemay, Rafe Colburn, Jennifer Kyrnin

Tytuł:
Roboty JavaScript od podstaw. Projekty NodeBots dla platformy Johnny-Five z wykorzystaniem płytek Raspberry Pi, Arduino oraz BeagleBone
Autor:
Rick Waldron, Backstop Media (lista współautorów w uwagach dodatkowych)