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().