Znacznik canvas – podstawowe informacje

Obiekt <canvas> jest kontenerem graficznym, pozwalającym na rysowanie za pomocą języków skryptowych (zwykle JavaScript). Sam element <canvas> pozwala jedynie na zdefiniowanie przestrzeni do rysowania.

Do czego służy ten znacznik?

Jak działa ten znacznik?

Rysowanie na canvas polega na pobraniu elementu za pomocą jednej z dostępnych funkcji np. getElementById() oraz pobranie jego zawartości (context). Gdy już posiadamy te elementy, możemy rysować dowolne rzeczy za pomocą dostępnych w JavaScript.

Przykłady użycia znacznika

Narysowanie linii

Użyty kod HTML: <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>>
Użyty kod JavaScript var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke();

GDZIE:

c.getContext(„2d”); – Przekazując do tego elementu wartość „2d” decydujemy się na rysowanie w dwóch wymiarach. Niestety na chwilę obecną nie ma innych opcji do wpisania w tym miejscu.

ctx.moveTo(0, 0); – Ustala początkowy punkt linii.

ctx.lineTo(200, 100); – Ustala końcowy punkt linii.

ctx.stroke(); – Odpowiada za narysowanie linii.

Narysowanie koła

Użyty kod HTML: <canvas id="myCanvas2" width="200" height="100" style="border:1px solid #000000;"> </canvas>
Użyty kod JavaScript: var c = document.getElementById("myCanvas2"); var ctx = c.getContext("2d"); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke();

GDZIE:

ctx.arc(95, 50, 40, 0, 2 * Math.PI); – Pierwsze dwa parametry to współrzędne środka koła, trzeci parametr to promień koła w promieniach. Kolejne dwa parametry to ‘start’ i ‘stop’ – czyli np. jeśli 0 oznacza ‘start’, to ‘stop’ musi być co najmniej tak duże jak obwód koła – jeśli byłoby mniejsze, narysowany zostałby tylko jego wycinek. Na koniec wywoływana jest jedna z metod “atramentu” – w naszym przypadku „stroke() powoduje narysowanie koła bez wypełnienia. Jeśli użylibyśmy „fill()”, narysowany zostałby okrąg z wypełnieniem.