Komentáře k článku
Canvas – říkejme tomu plocha na kreslení

Podívejme se na canvas z HTML5. Předvedeme si kreslení základních tvarů, cest, barevných přechodů a používání obrázků. Nakonec zkusíme v canvasu naprogramovat hru Halma.
Podívejme se na canvas z HTML5. Předvedeme si kreslení základních tvarů, cest, barevných přechodů a používání obrázků. Nakonec zkusíme v canvasu naprogramovat hru Halma.
Podpora v prohlížečích
API je jistě použitelné, bohužel, na programování aplikací pro širokou veřejnost na webu nepoužitelné, statistiky mluví jasně.
Re: Podpora v prohlížečích
tak společně s explorercanvas je podpora slušná bych řekl…
ale obecně na aplikace? někteří uživatelé nepřejdou „nikdy“, někteří přejdou, pokud se jim dá správný důvod… jako například slušná aplikace… :)
Re: Podpora v prohlížečích
Tak statistiky mluví opravdu jasně a už pár let dost pozitivně, s excanvasem canvas funguje klidně i v IE6 (detaily jsou popsány v článku). Pro statická použití (neanimovanou grafiku nebo jen minimálně animovanou) se canvas používá už pár let bez problému. Teď pomalu přichází doba i pro ta dynamičtější řešení.
Díky za pěknej článek
Je výborně čtivej!
Re: Díky za pěknej článek
Mě to zase vůbec nevyhovovalo.
canvas vs svg
Canvas vyuzivam pro aplikaci na mereni vykonu solarnich elektraren, kde je v grafu treba 150 krivek (pro kazdy menic zvlast) a musim rict, ze to s vykonem neni zadna slava. S excanvas vykresleni tohoto grafu trva neskutecne dlouho.
Mnohem lepsi se jevi pouziti SVG, ktere podporuje uz IE6 nativne. Napr. s pomoci knihovnou raphael (http://raphaeljs.com/). SVG toho umi vic, na svg elementy se daji bindovat eventy stejne jako na html elementy.
Obrovskou vyhodou je to, ze to je vektorova grafika. Takze kdyz to v prohlizeci (hlavne treba na telefonu ci tabletu) priblizite, grafika se vam zaostri, u canvasu nikoliv.
Mozna by to mohl byt navrh na dalsi clanek – srovnani svg a canvasu. Muj nazor je, ze svg je lepsi.
Re: canvas vs svg
O rapaheljs jsme se už dřív zmiňovali, stačí mrknout do archivu.
A SVG, že je lepší než canvas? To bude ovšem nějaký nesmysl 8-)
Vážně, u SVG x canvasu se nezdá, že by jedna z těch technologií měla jednou pro vždy předhonit a nahradit tu druhou. Je tu místo pro obě dvě (ostatně vektorová a bitmapová grafika obecně tu jsou obě už pár let vedle sebe a nic se na tom nemění). Základem je se naučit, kdy po které z nich sáhnout. Doporučuji googlovat ‚canvas vs svg‘, už se na tohle téma objevila řada úvah.
Re: canvas vs svg
Jistě, nejde říct, zda je obecně lepší vektorová nebo bitmapová grafika. Záleží na tom, jaké máme podklady, vstupy – zda to a) jsou fotografie nebo potřebujeme rastr a do něj chceme vykreslovat konkrétní body nebo b) máme nějaké objekty a ty chceme vykreslit. Většinou to budou spíš ty objekty*. Další možnost je mít plátno/rastr a nad ním si napsat nějakou abstraktní vrstvu, která umožní ty objekty vykreslovat, ale to je takové znovu-vynalézání kola, když můžeme použít již hotovou abstraktní vrstvu (SVG knihovnu v prohlížeči). Je to asi jako vykreslovat si 3D grafiku bod po bodu a scénu si počítat sám v aplikaci/hře, což je hodně neefektivní vs. použít OpenGL se všemi výhodami (méně kódu, znovupoužitelnost, hardwarová akcelerace…).
Zrovna jak tu jsou někde výše/níže ty miny – tam by se daleko víc hodilo SVG.
*) ve kterých můžou být i vložené bitmapy, takže člověk může mít oboje.
Re: canvas vs svg
Jasne, Canvas a SVG predstavuji dva odlisne pristupy k tvorbe grafiky, ktere se navzajem doplnuji, ale nelze obecne rict, ze jeden pristup je vzdy lepsi. Obecne se rozlisuje mezi rezimem retainded a immediate (hodne se to pouziva v 3D grafice, ale plati i pro 2D).
Canvas nabizi primy pristup k 2D pixmape, SVG zase graf sceny. I kdyby nakrasne obe technologie byly 100% podporovany ve vsech vyznamnych prohlizecich (dockame se? :-), tak to neznamena, ze jedna vytlaci druhou, spis se budou objevovat knihovny, ktere vytvori retained mode nad Canvasem (resp. ty knihovny uz tady jsou).
Re: canvas vs svg
Nebo se to taky da rict tak, ze vztah mezi canvasem a SVG je takovy, ze v canvasu je mozne napsat renderer SVG (napr. uz existuje i renderer flashovych vektorovych animaci), zatimco obracene to dost dobre nejde. :)
Opi-games
Delat hry v HTML5 Canvas je zabava. Ale nikdy se tolik neprosadi, jaky to ve Flashi. Jednim z hlavnich duvodu je, ze jsou volne pristupne zdrojove kody…
Ukazka z moji tvorby:
http://jan.danihelka.net/javascript/mars/mars.html
http://jan.danihelka.net/javascript/mines/mines.html
Re: Opi-games
To je pěkné, pošlu to na náš Twitter, díky za odkazy.
Re: Opi-games
Ad „Jednim z hlavnich duvodu je, ze jsou volne pristupne zdrojove kody…“
A to je problém? Mně to přijde spíš jako výhoda.
Ad „Ukazka z moji tvorby“
Pěkné, chvilku jsem si zahrál :-) Ale na druhou stranu musím říct, že na to, jak je to jednoduchá hra/grafika, je to poměrně dost líné, zrovna u takové skákačky je přesnost a odezva dost důležitá Myslím, že i na 286 byly takové hry svižnější…
Re: Opi-games
Mezi obfuskovaným / minifikovaným JavaScriptem a ActionScriptovým bytekódem snad zas tak velký rozdíl není…
Re: Canvas - říkejme tomu plocha na kreslení
Ehm… můžu být zlá?
„Vždyť přece co jiného je kruh, než oblouk kolem dokola? Vzpomínáte na základy geometrie?“
Jo, vzpomínám. A oblouk kolem dokola je <b>kružnice</b>. Kruh rovná se plošný útvar. Paní učitelka Krejčová (tehdy bohužel ještě soudružka) mi to, dej jí Pámbu věčnou slávu, vtloukla do hlavy dokonale.
Ale to už hledám hnidy, nenechte se rozptylovat. :-)
Re: Canvas - říkejme tomu plocha na kreslení
Ano, to bylo ztraceno v překladu, circle zde je opravdu kružnice.
A být zlý primárně nevyžaduje povolení, ale schopnost přijmout následky 8-)
3d canvas
Pouze bych doplnil, že 3d canvas existuje a je zaobalen do nadcházejícího „balíčku“ html 5 standardů – můžete ho nalézt pod termínem WebGL. Dostupný je ve všech nových verzí prohlížečů nativně včetně exploreru.
Re: 3d canvas
V IE přece není.
Re: 3d canvas
V IE opravdu není. Existuje jakýsi plugin http://iewebgl.com/ , ale ten situaci na trhu nevyřeší.