Souhrnná úloha – Cílový terč na plátně

Úloha

Zadání (kontext úlohy):

Nakresli na <canvas> jednoduchý „cílový terč“: několik soustředných kruhů uprostřed barevného obdélníku. Přidej tlačítko Vyčistit, které smaže vnitřní oblast a terč znovu vykreslí.

Cíl úlohy:

Procvičit vytvoření a nastavení <canvas>, získání 2D kontextu, kreslení obdélníku (fillRect), kruhů (beginPath, arc, fill, stroke) a mazání části plátna (clearRect).

Vstupní podmínky:

• Pracuj se soubory index.html a script.js.

• Používej pouze let a const (žádné var).

• Nepoužívej šipkové funkce ani ternární operátor.

• Pokud používáš podmínky, porovnávej výslovně (if (podminka == true) / if (podminka == false)).

Požadovaný výstup:

1. Na plátno vykresli podkladový obdélník (pozadí terče).

2. Doprostřed nakresli minimálně tři soustředné kruhy (největší vzadu).

3. Okraj nejmenšího kruhu obtáhni čárou (stroke).

4. Tlačítko Vyčistit smaže vnitřní obdélník terče pomocí clearRect() a terč znovu vykreslí.

5. Po načtení stránky se terč vykreslí automaticky.

Doplňující pokyny:

• Pro souřadnice středu použij šířku a výšku plátna (střed = width/2, height/2).

• Barvy zvol libovolné kontrastní.

• Funkce si rozděl: zvlášť pro podklad, zvlášť pro kruhy a zvlášť pro kompletní překreslení.

Řešení úlohy

Co je zde splněno

• Vytvořeno plátno <canvas> a získán 2D kontext (getContext("2d")).

• Vykreslen podkladový obdélník pomocí fillRect().

• Doprostřed nakresleny minimálně tři soustředné kruhy (beginPath(), arc(), fill()), u nejmenšího navíc okraj (stroke()).

• Tlačítko Vyčistit volá clearRect() nad vnitřní oblastí terče a znovu vykreslí terč.

• Po načtení stránky se terč vykreslí automaticky.

• Kód používá pouze let a const, žádné šipkové funkce ani ternární operátory.

• Funkce jsou oddělené: zvlášť podklad, kruhy i kompletní překreslení.