15 komentářů k článku Tvoříme slider obrázků pomocí HTML5 canvasu:

  1. Ondřej Žára

    polyfill
    Ahoj,

    1) v polyfillu se volá callback s časem, který odpovídá rozdílu mezi zavoláním rAF a inicializací polyfillu. Neměl by ten parametr spíš odpovídat rozdílu aktuálního času a toho inicializačního? Protože díky němu pak můžeme vyrovnat nerovnoměrnost časového kroku (časování rAF si řídí prohlížeč sám); v aktuálním řešení je „zpoždění“ způsobené setTimeout ignorováno.

    2) co přesně na globalAlpha není globální? Nastavená průhlednost se přeci aplikuje na všechny pixely ve všech operacích nad kontextem…

    1. Michal TanečekAutor příspěvku

      Re: polyfill
      1) Je pravda, že tento polyfill není úplný, ale pro potřeby těchto animací mi přijde naprosto dostačující. Je otázka, o kolik se bude lišit chyba třeba po 10^6 iteracích. Zkusím to a napíšu výsledek.

      2) Od globální property by jsem očekával:

      ctx.fillRect(...)     
      ctx.globalAlpha = 0.5; // teď by tedy měl mít obdélník 50% průhlednost.
      

      Místo toho se globalAlpha aplikuje pouze na následující operace s kontextem. (Jinak by ani nešel řešit třeba cross-fade efekt)

      1. Ondřej Žára

        Re: polyfill
        To by stejnou logikou mohl člověk očekávat, že po zavolání ctx.fillStyle = "red" se dříve černý obdélník přebarví na červenou. Vlastnosti (tuším, že tak se česky překládá „property“) jen nastavují parametry pro následné operace (metody), ale samy od sebe nic nevykreslují…

        1. Martin Hassman

          Re: polyfill

          Myslím, že tohle je spor o chápání slova globální. Soouhlasím s tím, že věta použitá v článku je nepřesná a matoucí. Autor upozorňuje, že nastavení globalAlpha nezmění průhlednost celého aktuálního canvasu (naopak by to tak bylo, kdybychom nastavili opacity pomocí CSS pro celý canvas), ake týká se následujících vykreslovacích metod. Z té použité formulace to není přesně znát.

        2. Michal TanečekAutor příspěvku

          Re: polyfill
          Chápu, že se zde spíše jedná o slovíčkaření, ale to klíčové slovo global mě upřímně na začátku hodně zmátlo. protože to opravdu nemění globálně všemu průhlednost.

          Mění to průhlednost odteď všemu, dokud neřeknu dost. :)

          MDN říká: Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).

          Ta property se opravdu jmenuje špatně, nazval bych ji fillAlpha, protože to je to, co opravdu dělá. Od globalAlpha by jsem očekával spíše následují: vezmi buffer co máš, a pixel po pixelu přepočítej průhledost.

      2. keff

        Re: polyfill

        Je otázka, o kolik se bude lišit chyba třeba po 10^6 iteracích.

        O to nejde, jde o jitter – hlavne pri pohybu objektu (napr. slide zleva doprava) staci milisekundy k tomu aby nam prestal pohyb pripadat plynuly – a par milisekund je v prostredi kde treba jedno jadro uz vytezuje flash a k tomu browser ceka na disk kvuli nejakemu cache requestu opravdu lehke nabrat.

  2. Miloš

    Proč canvas
    Nějak mě uniká, proč se používá canvas a ne nějaký normální html tag třeba IMG nebo obrázek v pozadí na DIV. Má canvas nějaké výhody ?

      1. Michal TanečekAutor příspěvku

        Re: Proč canvas
        Jak už napsal Pavel, canvas je předurčen pro práci s grafikou, ať už pro práci v 2d režimu pro slider, nebo pro hry v 3d režimu například Unreal engine.

  3. Pavel

    A co tablety?
    Tak nevím, zkusil jsem odkaz na „výsledný kód“ na PC (Chrome) a vše bylo OK. Pak jsem ale zkusil totéž na tabletu (iPad) a Safari ani Chrome se nechytali – zobrazili jen border okolo kanvasu a nic víc. Takže hezké, ale prakticky nepoužitelné…

    1. Martin Hassman

      Re: A co tablety?

      Díky za upozornění, bude fajn si v dalších dílech odzkoušet i funkci na tabletech. Celkem věřím, že pokud je tam nyní nějaký problém, tak bude překonatelný.

  4. Jan Růžička

    Jen pozor na ten překlep...
    Skvělý článek, moc jsi mi pomohl, ale jen tě chci upozornit, že (ale to samozřejmě je velice snadno přehlédnutelné) jsi napsal globalAplha místo globalAlpha.

  5. Michal Perutka

    Polyfill - oprava
    Jak jsem právě zjistil při ladění v IE9 (když jsem se divil, proč se animace nekoná, zato procesor jede na 100% ;), polyfill chybně volá callback funkci s parametrem dTime (rozdíl časů), správně ji má volat s aktuálním časem (viz definice funkce requestAnimationFrame).

    Také volat new Date().getTime() mi přijde zbytečné, stačí Date.now().

    Jinak díky za velice užitečný článek.

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=10909