Úvod do úlohy

Animace dává kresbě život: pohybující se objekt, otáčení, zmenšování či zvětšování. Na <canvas> probíhá animace tak, že opakovaně překreslujeme scénu – při každém kroku upravíme souřadnice (nebo transformaci) objektu a znovu vykreslíme. K tomu slouží requestAnimationFrame(), které spouští plynulé smyčky synchronizované s obnovovací frekvencí displeje. V této části si vyzkoušíte, jak správně mazat předchozí obrázek, měnit polohu a jak používat transformace (translate, rotate, scale) bez „rozbití“ dalších kreslení.

Teorie a principy

• Animace = opakované překreslování:

  1. Vymazat plátno (clearRect).

  2. Aktualizovat stav (souřadnice, úhel, měřítko).

  3. Vykreslit objekt v nové poloze.

  4. Znovu zavolat requestAnimationFrame(krok).

• requestAnimationFrame(fn): zavolá funkci před dalším překreslením obrazovky → plynulejší než setInterval.

• Transformace vs. souřadnice:

  • Souřadnice: kreslíte přímo na konkrétní (x, y).

  • Transformace: dočasně posunou/otočí/škálují souřadnicový systém.
    Vždy používejte save() → transformace → kreslení → restore(), aby se transformace nelepily na další tvary.

• Mazání: ctx.clearRect(0, 0, canvas.width, canvas.height) před každým krokem animace.

• Pořadí je klíčové: nejdřív čistíme, pak aktualizujeme stav, potom kreslíme, nakonec plánujeme další snímek.

Praktické příklady kódu

1) Základní animace – pohybující se čtverec (souřadnicemi)

HTML

JavaScript

Co si všímat: při každém snímku nejdřív čistíme (clearRect), až pak kreslíme novou polohu. Bez mazání by se čtverec „smearoval“ (zanechával stopu).

2) Transformace – rotující obdélník kolem středu

Tady nekreslíme obdélník na absolutní (x, y), ale posuneme souřadnicový systém do středu objektu a pak jej otočíme. Díky save() a restore() nepřenášíme transformace na další kreslení.

Všimněte si: bez save() a restore() by se rotace a posun kumulovaly i na další kresby a souřadnice by „ulétly“.

3) Kombinace výplně, průhlednosti a mazání části scény (mini-efekt)

Krátká ukázka, jak globalAlpha ovlivní vzhled a jak „vykousnout“ otvor.

Typické chyby / záludnosti

• Nemazání plátna v každém kroku → vznikají šmouhy a „duchové“ objektů.

• Zapomenuté save() / restore() u transformací → transformace se sčítají a rozhodí další kreslení.

• Špatné pořadí operací: změním transformaci až po kreslení nebo aktualizuji stav po vykreslení → objekt reaguje se zpožděním.

• Přehnaná rychlost: změny souřadnic příliš velké → objekt „skáče“. Začněte malými kroky (např. +2), pak dolaďte.

• Záměna stupňů a radiánů při rotaci (canvas používá radiány: Math.PI = 180°).

• Nevhodné rozměry canvasu jen přes CSS → rozmazané vykreslení. Rozměry nastavte atributy width a height v HTML.

Shrnutí

• Animace na <canvas> = cyklus s requestAnimationFrame: čistit → aktualizovat → kreslit → požádat o další snímek.

• Souřadnice určují polohu objektu; transformace dočasně mění souřadnicový systém (používejte save()/restore()).

• clearRect čistíme scénu, translate/rotate/scale ovládáme pohyb, otáčení a měřítko.

• Udržujte správné pořadí volání, malé kroky a radiány pro rotaci.

Úloha

Zadání (kontext úlohy):

Chceme vytvořit úplně jednoduchou animaci – čtverec, který se sám posouvá doprava.

Cíl úlohy:

Student si procvičí práci s requestAnimationFrame(), vymazání plátna (clearRect) a opakované vykreslování tvaru.

Vstupní podmínky:

Student pracuje pouze se souborem index.html. JavaScript bude ve <script> na konci stránky.

Požadovaný výstup:

• Na plátně se zleva doprava plynule pohybuje vyplněný čtverec.

• V každém snímku je plátno smazané a čtverec překreslený na nové pozici.

• Čtverec po dojetí na pravý okraj „zmizí“ (není nutný odraz).

Doplňující pokyny:

• Začni s malou rychlostí (např. +2 pixely na snímek).

• Pro mazání vždy používej clearRect(0, 0, canvas.width, canvas.height).

Řešení úlohy

Co je zde splněno

• Použit requestAnimationFrame() pro plynulé animování.

• Každý snímek se plátno smaže pomocí clearRect(0, 0, canvas.width, canvas.height).

• Čtverec se posouvá doprava o 2 pixely za snímek.

• Po dosažení pravého okraje čtverec zmizí (animace se ukončí).