Úvod do úlohy

Canvas 2D funguje podobně jako kreslení tužkou na papír. Nejprve „zvedneme tužku“ (beginPath()), posuneme ji na určité místo (moveTo(x, y)), nakreslíme čáru do jiného bodu (lineTo(x, y)) a nakonec řekneme „teď to obtáhni“ (stroke()). Díky tomu máme plnou kontrolu nad tím, kdy se kreslení začne, kam se vede, jak silná je čára a jakou má barvu. Tento mechanismus se nazývá cesta (path).

Teorie a principy

• beginPath(): začne novou cestu, stará už se neovlivňuje.

• moveTo(x, y): posune virtuální „pero“ na souřadnice, aniž by se něco vykreslilo.

• lineTo(x, y): přidá úsečku od aktuálního bodu do nového bodu.

• stroke(): obkreslí (vykreslí) aktuální cestu podle nastavení stylu čáry.

• ctx.lineWidth: nastavuje tloušťku čáry (v pixelech).

• ctx.strokeStyle: nastavuje barvu nebo vzor čáry.

• Správné pořadí je beginPath → moveTo → lineTo → stroke. Pokud beginPath() vynecháme, nové čáry se budou „lepit“ k těm starým.

Praktický příklad kódu

Tento kód nakreslí dvě čáry – jednu vodorovnou červenou a jednu šikmou modrou.

Typické chyby

• Zapomenuté beginPath(): nové úsečky se připojí k těm starým a čára bude pokračovat, kam student nechtěl.

• Volání stroke() příliš brzy: pokud zavoláme stroke() hned po moveTo() bez lineTo(), nic se nevykreslí.

• Nesprávné pořadí nastavení stylů: je třeba změnit lineWidth a strokeStyle před stroke().

• Souřadnice mimo plátno: pokud použijí hodnoty větší než width nebo height, čára se nebude zobrazovat.

Shrnutí

• Pro kreslení čar musíme pracovat s cestami (beginPath, moveTo, lineTo).

• Vždy kreslení zakončujeme příkazem stroke().

• lineWidth určuje tloušťku čáry, strokeStyle její barvu.

• Nezapomeňte začít novou cestu (beginPath()), pokud kreslíte další úsečku.

Úloha

Zadání (kontext úlohy):

Na prázdné plátno potřebujeme nakreslit dvě čáry – jednu vodorovnou a druhou šikmou. Čáry budou mít různé barvy a tloušťky.

Cíl úlohy:

Student si procvičí práci s cestou (path) – použití metod beginPath(), moveTo(), lineTo() a stroke().

Vstupní podmínky:

Student pracuje se souborem index.html, kde je vložený <canvas> s id platno. Kód JavaScriptu bude přímo ve <script> na konci stránky.

Požadovaný výstup:

• První čára: vodorovná, červená, silnější (tloušťka např. 4 px).

• Druhá čára: šikmá, modrá, tenčí (tloušťka např. 2 px).

• Každá čára začíná vlastní cestu pomocí beginPath().

Doplňující pokyny:

• Nastav tloušťku (lineWidth) a barvu (strokeStyle) vždy před vykreslením stroke().

• Pokud vynecháš beginPath(), obě čáry se spojí do jedné.

Řešení úlohy

Co je zde splněno

• Vytvořen <canvas> s id platno a pevnými rozměry.

• Získán 2D kontext a ověřeno, že není null.

• Vykresleny dvě čáry pomocí beginPath(), moveTo(), lineTo() a stroke().

• Každá čára má svou vlastní barvu a tloušťku.

• Díky beginPath() se čáry nespojují do jedné.