Współrzędne na kanwie

W rozdziale:

Kanwa jest dwuwymiarowym układem współrzędnych. Punkt o współrzędnych (0, 0) znajduje się w lewym górnym rogu kanwy. Na osi x wartości zwiększają się w prawo. Na osi y wartości zwiększają się w dół.

Schemat układu współrzędnych

Ten układ współrzędnych został narysowany przy użyciu elementu canvas. Rysunek ten zawiera:

zestaw poziomych linii w kolorze złamanej bieli,
zestaw pionowych linii w kolorze złamanej bieli,
dwie czarne poziome linie,
dwie małe skośne linie tworzące grot strzałki,
dwie czarne pionowe linie,
dwie małe skośne linie tworzące drugi grot strzałki,
literę x,
literę y,
tekst „(0, 0)” umiejscowiony w pobliżu lewego górnego rogu,
tekst „(500, 375)” umiejscowiony w pobliżu prawego dolnego rogu,
dwie kropki: w lewym górnym i prawym dolnym rogu.

Najpierw trzeba zdefiniować sam element canvas. W naszym elemencie zdefiniowaliśmy atrybuty width i height oraz id, dzięki któremu będziemy mogli go później odnaleźć.

<canvas id="c" width="500" height="375"></canvas>

Kolejną potrzebną nam rzeczą jest skrypt, który znajdzie element canvas w drzewie DOM i pozwoli nam uzyskać dostęp do jego kontekstu rysunkowego.

var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");

Teraz możemy rozpocząć rysowanie linii.

Semantyka HTML5 Kurs HTML5 Wideo na stronie