Pracując z elementem CANVAS spotykam się często z dwoma zagadnieniami: pobrania koloru piksela i kreślenia piksela. Jeśli chodzi stawianie punktu, to zazwyczaj spotykamy się z następującą metodą:
var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
ctx.fillRect(100, 100, 1, 1);
Z zmiennej ctx mamy obiekt RenderingContext pozwalający na dostęp przez dwie współrzędne (stąd parametr '2d'). Punkt stawiamy poprzez nakreślenie wypełnionego prostokąta o wymiarach 1x1 (parametr 3 i 4) na współrzędnych 100,100 (parametr 1 i 2). Wcześniej ustawiliśmy kolor czerwony dla wypełnienia. Domyślny kolor wypełnienia to czarny, a domyślny kolor tła CANVAS to biały. I ta metoda oczywiście się sprawdza, ale niekoniecznie przy dynamicznych efektach na CANVAS, kiedy potrzebujemy postawić tych punktów tysiące lub dziesiątki tysięcy.
Jak być szybszym?
