Ścieżki na kanwie w HTML5

W rozdziale:

Ścieżki

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
7.0+^*	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
* Internet Explorer 7 i 8 wymagają dodatku zewnętrznej biblioteki explorercanvas. Internet Explorer 9 standardowo obsługuje ścieżki elementu `<canvas>`.

Wyobraź sobie, że rysujesz coś atramentem. Raczej nie zaczniesz od razu tak po prostu rysować, bo możesz popełnić błąd. Najpierw pewnie zrobisz szkic ołówkiem, a gdy osiągniesz zadowalający efekt poprawisz linie atramentem.

Kanwy mają ścieżki. Definiowanie ścieżki jest odpowiednikiem rysowania szkicu ołówkiem. Można narysować co się chce, ale dopóki nie poprawi się linii atramentem nie będzie tego widać na gotowym rysunku.

Aby narysować prostą linię za pomocą ołówka, należy użyć dwóch metod:

moveTo(x, y) — przenosi ołówek w wyznaczone miejsce.
lineTo(x, y) — rysuje linię do określonego punktu.

Im więcej wywołań metod moveTo() i lineTo(), tym większa ścieżka. To są metody „ołówkowe”, tzn. można je wywoływać do woli, ale dopóki nie użyje się jednej z metod „atramentowych” nie będzie widać żadnego efektu.

Najpierw narysujemy siatkę.

Rysowanie pionowych linii

for (var x = 0.5; x < 500; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 375);
}

Rysowanie poziomych linii

for (var y = 0.5; y < 375; y += 10) {
  context.moveTo(0, y);
  context.lineTo(500, y);
}

To były metody „ołówkowe”. Na kanwie nie widać jeszcze żadnego rysunku. Żeby stał się widoczny, musimy użyć metody „atramentowej”.

context.strokeStyle = "#eee";
context.stroke();

stroke() jest jedną z metod „atramentowych”. Pobiera skomplikowaną ścieżkę zdefiniowaną przy użyciu metod moveTo() i lineTo() i tworzy rysunek na kanwie. Metoda strokeStyle służy do ustawiania koloru linii. Oto wynik działania przedstawionego skryptu:

Pytanie do profesora Kodeckiego

P: Dlaczego zmienne x i y mają wartość początkową 0.5? Dlaczego nie 0?
O: Wyobraź sobie, że każdy piksel jest dużym kwadratem. Współrzędne całkowitoliczbowe (0, 1, 2…) są krawędziami tych kwadratów. Jeśli między współrzędnymi całkowitoliczbowymi narysujesz linię o szerokości jeden, najdzie ona na przeciwne strony kwadratu piksela i powstanie linia o szerokości dwóch pikseli. Aby narysować linię o szerokości tylko jednego piksela, należy przesunąć współrzędne o 0.5 prostopadle do linii.

Przykładowo, jeśli narysujesz linię od punktu (1, 0) do (1, 3), przeglądarka narysuje linię okrywającą 0,5 piksela ekranu po każdej stronie x=1. Na ekranie nie da się wyświetlić tylko połowy piksela, więc linia zostanie rozciągnięta na dwa piksele:

Ale jeśli spróbujesz narysować linię od punktu (1.5, 0) do (1.5, 3), przeglądarka narysuje linię pokrywającą po 0,5 piksela po każdej stronie x=1.5, co daje w wyniku linię o szerokości jednego piksela:

Dziękuję Jasonowi Johnsonowi za te schematy.

Teraz narysujemy poziomą strzałkę. Wszystkie proste i krzywe na ścieżce są w tym samym kolorze (albo mają gradient, o czym zaraz będzie mowa). Jako że strzałka ma mieć inny kolor — czarny, nie biały — musimy utworzyć nową ścieżkę.

Nowa ścieżka

context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);

Pionowa strzałka jest bardzo podobna. Ponieważ ma taki sam kolor, jak pozioma strzałka, nie musimy dla niej tworzyć nowej ścieżki. Obie strzałki będą należały do jednej ścieżki.

Nie nowa ścieżka

context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);

Napisałem, że strzałki mają być czarne, ale własność strokeStyle ma nadal kolor złamanej bieli. (Ustawienia własności fillStyle i strokeStyle nie są kasowane po utworzeniu nowej ścieżki.) Na razie to nie przeszkadza, bo wykonaliśmy tylko kilka wywołań metod „ołówkowych”. Zanim jednak utrwalimy rysunek atramentem, musimy ustawić własność strokeStyle na czerń. W przeciwnym razie strzałki będą białawe i ledwie będzie je widać! Poniższe wiersze kodu zmieniają kolor na czarny i rysują linie na kanwie:

context.strokeStyle = "#000";
context.stroke();

Oto wynik działania przedstawionego skryptu:

Semantyka HTML5 Kurs HTML5 Wideo na stronie