Archiwum Szsz.pl: października 2009
Linia 1px
wtorek, 27 października 2009
Szybkie pytanie:
Jak narysować linię o grubości jednego piksela?
… w elemencie html canvas?
Wydaje się że nic łatwiejszego? Zobaczmy. Oto mały kawałek kodu:
var canvas = document.getElementById("example1");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 1; /* grubość linii */
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(90,10);
ctx.stroke();
Użytkownicy normalnych
przeglądarek, mogą zobaczyć rezultat bezpośrednio na tej stronie.
Niespodzianka…
Linia ma grubość dwóch pikseli.
Na niektórych przeglądarkach jest też lekko rozmyta… i z całą
pewnością nie jest czarna.
Rozwiązaniem jest dodanie jednego małego przekształcenia (przed rozpoczęciem rysowania):
ctx.translate(0.5, 0.5);
Ma ono za zadanie przesunięcie całego układu współrzędnych o 0,5 piksela.
Wyjaśnienie takiego a nie innego zachowania elementu canvas, jest w miarę proste. Element ten używa liczb rzeczywistych jako współrzędnych, tak więc para (0.0, 0.0) oznacza lewy górny narożnik piksela, nie jego środek.
Resztę pozostawiam wyobraźni…
Etykiety: canvas, javascript, programowanie, R
Red 15:00