Souhrnná úloha – Semafor na plátně

Úloha

Zadání (kontext úlohy):

Nakresli na <canvas> jednoduchý semafor se třemi světly (červené, žluté, zelené). Program bude světla střídavě rozsvěcet a zhasínat v pevném pořadí.

Cíl úlohy:

Procvičit vytvoření a nastavení <canvas>, získání kontextu, kreslení základních tvarů (rect, arc, fill), mazání části plátna (clearRect) a jednoduchou animaci pomocí opakovaného překreslování.

Vstupní podmínky:

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

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

• Používej pouze let a const.

• V podmínkách porovnávej výslovně (if (podminka == true) / if (podminka == false)).

Požadovaný výstup:

1. Na plátno nakresli „tělo semaforu“ (obdélník) a tři kruhy pro světla nad sebou.

2. Vždy musí svítit právě jedno světlo (nejdříve červené, potom žluté, potom zelené a znovu dokola).

3. Před rozsvícením další barvy vymaž oblast se světly (clearRect) a znovu ji vykresli.

4. Animace běží automaticky po načtení stránky (interval cca 700–900 ms).

5. Přidej tlačítko Start/Stop, které animaci spustí a zastaví.

Doplňující pokyny:

• Pro kruhy použij beginPath(), arc(), fill().

• Pro tělo semaforu použij fillRect().

• Barvy světel: jakékoli 3 výrazné barvy, textury ani obrázky nejsou potřeba.

• Tlačítko přepínej podle stavu (if (bezi == true) → zastav; if (bezi == false) → spusť).

Řešení úlohy

Co je zde splněno

• Na <canvas> je vykreslen obdélník (tělo semaforu) pomocí fillRect().

• Tři kruhy (světla) jsou kresleny pomocí beginPath(), arc(), fill().

• Vždy svítí právě jedno světlo; pořadí: červená → žlutá → zelená → znovu.

• Před rozsvícením další barvy se světla mažou metodou clearRect() a znovu vykreslí.

• Animace běží automaticky po načtení stránky (interval ~800 ms).

• Tlačítko Start/Stop přepíná běh animace podle stavu bezi přes explicitní porovnání v if.