Canvas - Doom ve vašem prohlížeči

24. 4. 2008 15:45 (aktualizováno) | Martin Hassman

Nedávno jsem psal, proč je canvas připraven pro web. Dnes si ukážeme několik dalších ukázek použití canvasu, možná někoho inspirují.

(Skoro)Doom v canvasu

Posledně jsem ukazoval Canvascape, zárodek enginu pro procházení 3D prostorem v canvasu.

Ovšem Philip Taylor se svým Canvex nabízí rovnou Dooma v prohlížeči. Zatím ještě nemá implementované potvůrky, které byste mohli střílet, ale 3D prostředí již má svou úroveň; skáčete přes sudy, dveře se před vámi otevírají, běháte po schodech atd.

Připraven je level pod kódovým názvem 83 a pracuje se na dalším, levelu 84. Philip se dal slyšet, že již uvažuje o multiplayer variantě.

Rychlost 3D

Pokud si obraz zvětšíte, zaznamenáte již trhaný pohyb a vytíženost procesoru vzroste na maximum. Je to proto, že canvas v tuto chvíli nabízí pouze 2D API. Veškeré 3D efekty jsou počítány JavaScriptem.

V kódu Firefoxu se již objevily začátky práce na 3D API, takže nezbývá než doufat, že se pak dočkáme výrazného zrychlení a možná i hardwarové akcelerace.

Další ukázky canvasu s 3D nedávno odkazoval Martin Malý.

Yahoo používá canvas

Aplikace Yahoo Pipes používá canvas (a pak proč canvas nepoužívat už dnes!) pro zobrazení vektorových diagramů (pro Internet Explorer zdá nepoužívají emulaci canvasu, ale zasílají mu vyrenderovaný obrázek).

Další použití

Posledně jsem to nenapsal, ale prakticky všechny aplikace dashboardu (plochy určené pro widgetové aplikace typu kalkulačka, převod kurzů apod.) na Mac OS X jsou vytvořeny pomocí canvasu. Byl to právě Apple, kdo začal canvas roku 2003 implementovat pro použití v dashboardu (na web se dostal až po té).

Canvas můžete použít i pro jednoduché vektorové obrázky a animace nebo grafické hříčky.

Pomocí JavaScriptové knihovny Corner.js snadno zakulatíte rohy vašim obrázkům elegantní metodou unobtrusive JavaScriptu (obrázkům jen nastavíte patřičné CSS třídy a připojená knihovna zařídí zbytek).

Canvas umí vykreslený obsah převést na PNG, jak se můžete přesvědčit na jednoduchém kreslicím programu Paintr (něco nakreslete a zvolte Save, pokud se vám vyrenderované PNG líbí, uložte si výslednou stránku). To by šlo použít pro jednoduché úpravy obrázků. v prohlížeči.

SVG vs. canvas

U přecházejícího článku se naskytla otázka, kdy se hodí použití canvasu a kdy naopak SVG. Odpověd nastíní dvě citace.

       SVG and <canvas> have very different expected use cases. <canvas> is
       useful for lightweight dynamic bitmap presentation, e.g. bitmap games,
       fractal generation, or dynamically generated sparklines. SVG is more
       suited for static images, sprite-based animation (e.g. your typical "Flash
       cartoon"), and interactive graphics where components are long-lived but
       move around a lot.

Ian Hickson

Pro podrobnější popis si přečtěte článek SVG vs. Canvas: Tastes Great, or Less Filling?

       In general, SVG and canvas are complimentary, rather than competing, technologies.
       Anything you can do in one, you can do in the other, but each one is optimized
       for certain situations.

Patent Apple

Bude pochopitelně zajímavé sledovat, zda se vyjádří Apple v otázce jeho patentu na canvas. Jelikož canvas je součástí adoptované specifikace u W3C, je pravděpodobné, že Apple bude dříve či později o vyjádření požádán.

Update – tvorba grafů

Po sepsání tohoto článku vyšla na Linuxsoft.cz zajímavá zprávička o využití canvasu při tvorbě grafů. Jedná se o JavaScriptovou knihovnu Plotr, pomocí které můžete snadno vkládat do svých stránek vygenerované grafy.

Anketa

Hráli byste Dooma ve webovém prohlížeči?

Přidávat nové názory je zakázáno.

Měšec.cz: Do ostravské MHD bez jízdenky. Stačí karta

Do ostravské MHD bez jízdenky. Stačí karta

Měšec.cz: Co s reklamací, když e-shop krachuje?

Co s reklamací, když e-shop krachuje?

Měšec.cz: Se stavebkem k soudu už (většinou) nemusíte

Se stavebkem k soudu už (většinou) nemusíte

Podnikatel.cz: 5 základních bodů, když vytváříte značku

5 základních bodů, když vytváříte značku

Podnikatel.cz: OSA zdražuje poplatky. Zaplatíte o polovinu víc

OSA zdražuje poplatky. Zaplatíte o polovinu víc

Root.cz: Xiaomi má vlastní notebook podobný Macu

Xiaomi má vlastní notebook podobný Macu

Měšec.cz: Co když na dovolené přijdete o kartu?

Co když na dovolené přijdete o kartu?

Vitalia.cz: Je bílý kokos fakt tak úžasný? Ano, je!

Je bílý kokos fakt tak úžasný? Ano, je!

Měšec.cz: TEST: Vyzkoušeli jsme pražské taxikáře

TEST: Vyzkoušeli jsme pražské taxikáře

DigiZone.cz: Test TV Samsung UE49K6372SU

Test TV Samsung UE49K6372SU

DigiZone.cz: ČTÚ zveřejnil aktualizovaný D-Book

ČTÚ zveřejnil aktualizovaný D-Book

DigiZone.cz: AXN u FreeSatu měsíc zdarma

AXN u FreeSatu měsíc zdarma

Podnikatel.cz: Oznamte skutečné sídlo firmy, jinak zaplatíte

Oznamte skutečné sídlo firmy, jinak zaplatíte

120na80.cz: Víte, co je svobodná menstruace?

Víte, co je svobodná menstruace?

Vitalia.cz: Vakcína Cervarix je oficiálně i pro chlapce

Vakcína Cervarix je oficiálně i pro chlapce

Lupa.cz: Hackujete? Můžete mít problém sehnat práci

Hackujete? Můžete mít problém sehnat práci

DigiZone.cz: E! a zákulisí turné Mariah Carey

E! a zákulisí turné Mariah Carey

DigiZone.cz: Jetelín končí. Prima ho vyřadila

Jetelín končí. Prima ho vyřadila

DigiZone.cz: Hodlá Markíza skončit v DVB-T?

Hodlá Markíza skončit v DVB-T?

Lupa.cz: Co vzal čas: internetové kavárny a herny

Co vzal čas: internetové kavárny a herny