Úvod do úlohy

Kruhy a oblouky patří k základním stavebním prvkům v grafice. Používají se nejen pro dekorace, ale i pro grafy, ukazatele nebo hry. V <canvas> se kruh (nebo část kruhu) kreslí pomocí metody arc(x, y, r, startAngle, endAngle), která definuje oblouk podle středu, poloměru a rozsahu úhlů. Díky tomu lze nakreslit jak celé kružnice, tak půlkruhy nebo různé výseče. Studenti si tak uvědomí, že canvas pracuje s úhly v radiánech, a že pro zobrazení výsledného tvaru je nutné cestu dokončit voláním stroke() (obrys) nebo fill() (výplň).

Teorie a principy

• Syntaxe:
  ctx.arc(x, y, r, startAngle, endAngle)

  • x, y – souřadnice středu kruhu,

  • r – poloměr,

  • startAngle – počáteční úhel v radiánech,

  • endAngle – koncový úhel v radiánech.

• Radiány vs. stupně:

  • 0 rad = pravý směr (osa X doprava),

  • Math.PI = 180°,

  • 2 * Math.PI = 360° (celý kruh).

• Cesta:

  • vždy začínáme beginPath(),

  • definujeme oblouk pomocí arc(),

  • kresbu ukončíme stroke() nebo fill().

• Výseče a půlkruhy:

  • změnou startAngle a endAngle získáme část kruhu,

  • např. 0 až Math.PI = půlkruh.

Praktické příklady kódu

Typické chyby

• Zapomenuté beginPath() – oblouky se spojují s předchozími tvary.

• Chybějící stroke() nebo fill() – tvar se nevykreslí, protože cesta nebyla dokončena.

• Použití stupňů místo radiánů – např. zadání 180 místo Math.PI nevytvoří půlkruh, ale obrovský oblouk.

• Neuzavřený sektor – pokud chceme výseč, musíme se vrátit zpět do středu (moveTo + closePath).

Shrnutí

• Kruh a oblouky kreslíme metodou arc(x, y, r, start, end).

• Úhly se zadávají v radiánech – celý kruh je 2 * Math.PI.

• Výsledný tvar se zobrazí až po volání stroke() nebo fill().

• Půlkruhy a výseče vznikají změnou rozsahu úhlů.

• Pro sektory nezapomeňte cestu uzavřít pomocí closePath().

Úloha

Zadání (kontext úlohy):

Chceme si vyzkoušet kreslení kruhů a oblouků na plátně. Nakreslíme jeden kruh jen s obrysem, druhý vyplněný a také půlkruh.

Cíl úlohy:

Student si procvičí použití metody arc(), práci s radiány a vykreslení obrysu (stroke) i výplně (fill).

Vstupní podmínky:

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

Požadovaný výstup:

• Na plátně bude:

  • modrý kruh jen s obrysem,

  • oranžový vyplněný kruh,

  • zelený půlkruh.

• Každý tvar začíná voláním beginPath() a končí stroke() nebo fill().

Doplňující pokyny:

• Celý kruh se kreslí úhly od 0 do 2 * Math.PI.

• Půlkruh vytvoříš od 0 do Math.PI.

• Nezapomeň, že metoda arc(x, y, r, startAngle, endAngle) potřebuje úhly v radiánech.

Řešení úlohy

Co je zde splněno

• Modrý kruh s obrysem vytvořen metodou arc() a vykreslen přes stroke().

• Oranžový kruh vyplněný pomocí fill().

• Zelený půlkruh vykreslen jako oblouk od 0 do Math.PI.

• Všechny tvary začínají beginPath() a končí stroke() nebo fill().