Úloha 4 – Základní tvary: obdélník, kruh a clearRect()

Úvod do úlohy

Canvas je plocha, na kterou kreslíme pomocí souřadnic. Každý bod na plátně má x (vodorovnou) a y (svislou) souřadnici.

Osa X roste směrem doprava.
Osa Y roste směrem dolů.
Levý horní roh má souřadnice (0, 0).

To je jiné než v matematice, kde obvykle osa Y roste nahoru. V canvasu tedy platí, že čím větší hodnota y, tím níž se tvar vykreslí. Pokud nakreslíme obdélník na (20, 20) o rozměrech 100 × 50, bude začínat 20 pixelů od levého a 20 pixelů od horního okraje a zabere prostor až po bod (120, 70).

Kreslení není omezeno jen na čáry – velmi často potřebujeme vyplněné tvary. Canvas nám nabízí jednoduché metody pro obdélníky, kruhy a také gumování. Naučíme se také používat barvy a průhlednost.

Teorie a principy

Obdélníky:
- fillRect(x, y, w, h) – vyplněný obdélník.
- strokeRect(x, y, w, h) – jen obrys.
- clearRect(x, y, w, h) – smaže část plátna.
Cesty a kruhy:
- beginPath() – začátek nové cesty.
- arc(x, y, r, startAngle, endAngle) – nakreslí oblouk nebo celý kruh (úhly v radiánech).
- fill() – vyplní cestu.
- stroke() – obkreslí cestu.
Stylování:
- ctx.fillStyle = "barva"; – barva výplně.
- ctx.strokeStyle = "barva"; – barva obrysu.
- ctx.globalAlpha = číslo; – průhlednost (0 = průhledné, 1 = neprůhledné).

Praktické příklady kódu

Typické chyby

Zapomenutý beginPath() → kruh se spojí s předchozím tvarem.
Použití stupňů místo radiánů → arc() vyžaduje úhly v radiánech (Math.PI místo 180).
Neobnovení globalAlpha → další tvary zůstávají průhledné, i když jsme to nechtěli.
Představa, že osa Y roste nahoru → ve skutečnosti roste dolů.
Záměna souřadnic se šířkou a výškou → u fillRect první dva parametry jsou pozice, další dva rozměry.

Shrnutí

Canvas má souřadnicový systém s počátkem v levém horním rohu (0,0).
Osa X roste doprava, osa Y dolů.
Obdélníky: fillRect, strokeRect, clearRect.
Kruhy: arc + fill nebo stroke.
Styly kreslení se nastavují přes fillStyle, strokeStyle a globalAlpha.
clearRect funguje jako „guma“ na části plátna.