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: , , ,

Red 15:00

Komentarze

Prześlij komentarz

Archiwum

Subskrybuj

RSS / Atom