Ú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ť).