Úvod do úlohy

Obdélník (nebo čtverec) je nejjednodušší geometrický tvar, který si lze na plátně <canvas> vyzkoušet. Pomáhá studentům pochopit, že kreslení probíhá pomocí cest (path) – začínáme je, definujeme tvar a pak ho vykreslíme obrysem nebo výplní. Oproti metodě fillRect() (která nakreslí obdélník rovnou) je použití rect() zajímavé tím, že se začlenňuje do cesty a lépe ukazuje, jak kreslení na canvasu skutečně funguje. Díky tomu si studenti uvědomí, že tvary lze kombinovat, uzavírat a že pořadí volání metod rozhoduje o výsledku.

Teorie a principy

• Cesta (path): posloupnost kreslících příkazů, kterou lze vykreslit jedním příkazem stroke() nebo fill().

• Začátek kreslení: vždy beginPath(), jinak by se nové tvary připojovaly k těm starým.

• Metoda rect(x, y, width, height): přidá do cesty obdélník, jehož levý horní roh je v bodě (x, y).

• Obrys (stroke) vs. výplň (fill):

  • stroke() vykreslí jen čáry obdélníku.

  • fill() vyplní vnitřní plochu podle barvy fillStyle.

• Pořadí: beginPath() → rect(...) → stroke() nebo fill() → closePath().

Praktický příklad kódu

Typické chyby

• Zapomenutý beginPath() → nový obdélník se připojí k předchozímu tvaru.

• Volání stroke() před definováním tvaru → nic se nevykreslí.

• Záměna parametrů rect() → studenti pletou, že první dva jsou souřadnice levého horního rohu a další dva jsou rozměry (ne souřadnice protilehlého rohu).

• Chybějící closePath() → pro jednoduchý obdélník to nemusí vadit, ale u složitějších tvarů zůstane cesta „otevřená“.

Shrnutí

• Obdélník na canvasu lze kreslit nejen fillRect(), ale i metodou rect() jako součást cesty.

• Správný postup: beginPath() → rect() → nastavení stylu → stroke() nebo fill() → closePath().

• Levý horní roh se určuje prvními dvěma parametry (x, y), šířka a výška dalšími dvěma.

• stroke kreslí obrys, fill vyplňuje plochu.

• U složitějších tvarů a kombinací cest je dobré vždy cestu uzavírat.

Úloha

Zadání (kontext úlohy):

Chceme nakreslit obdélník a čtverec pomocí cesty. Oproti metodě fillRect() se u rect() jasně ukazuje, že jde o součást cesty, kterou lze obkreslit (stroke()) nebo vyplnit (fill()).

Cíl úlohy:

Student si procvičí kreslení obdélníku metodou rect() v kombinaci s beginPath(), stroke() a fill().

Vstupní podmínky:

Student pracuje se souborem index.html, kde je vložen <canvas> s id platno. JavaScriptový kód bude ve <script> na konci stránky.

Požadovaný výstup:

• Na plátně se objeví obdélník s modrým obrysem.

• Vedle něj čtverec vyplněný oranžovou barvou.

• Každý tvar začíná svou cestu (beginPath()) a je ukončen (closePath()).

Doplňující pokyny:

• Parametry metody rect(x, y, w, h): první dva jsou souřadnice levého horního rohu, další dva šířka a výška.

• Nezapomeň na beginPath() před každým tvarem, jinak se obdélníky spojí.

• Pro výplň použij fillStyle, pro obrys strokeStyle a lineWidth.

Řešení úlohy

Co je zde splněno

• Na plátně je modrý obdélník vykreslený pomocí rect() a stroke().

• Vedle je čtverec vyplněný oranžovou barvou pomocí rect() a fill().

• Každý tvar má svou cestu: beginPath() na začátku a closePath() na konci.

• Správně nastaveny vlastnosti pro obrys (strokeStyle, lineWidth) i výplň (fillStyle).

Vylepšení oproti začátečnické verzi

• Vytvořena univerzální funkce drawRect, která umí kreslit jak s výplní, tak s obrysem.

• Použit moderní zápis (const, objekt s parametry).

• Přidán vylepšený vzhled plátna (stín, zarovnání na střed, světlé pozadí).

• Kód je modulárnější a snadno rozšiřitelný o další tvary.