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.

DigiZone.cz: Test LG 55UH750V aneb Cena/výkon

Test LG 55UH750V aneb Cena/výkon

DigiZone.cz: Nova opět stahuje „milionáře“

Nova opět stahuje „milionáře“

Vitalia.cz: Inspekce našla nelegální sklad v SAPĚ. Zase

Inspekce našla nelegální sklad v SAPĚ. Zase

Vitalia.cz: 5 důvodů, proč jet na výlov rybníka

5 důvodů, proč jet na výlov rybníka

Podnikatel.cz: Udělali jsme velkou chybu, napsal Čupr

Udělali jsme velkou chybu, napsal Čupr

Vitalia.cz: Když všichni seli řepku, on vsadil na dýně

Když všichni seli řepku, on vsadil na dýně

DigiZone.cz: Parlamentní listy: kde končí PR...

Parlamentní listy: kde končí PR...

Vitalia.cz: dTest odhalil ten nejlepší kečup

dTest odhalil ten nejlepší kečup

Podnikatel.cz: Dva měsíce na EET. Budou stačit?

Dva měsíce na EET. Budou stačit?

Lupa.cz: Jak se prodává firma za miliardu?

Jak se prodává firma za miliardu?

DigiZone.cz: Ginx TV: pořad o počítačových hráčích

Ginx TV: pořad o počítačových hráčích

Vitalia.cz: 5 pravidel proti infekci močových cest

5 pravidel proti infekci močových cest

Vitalia.cz: Jaký je rozdíl mezi brambůrky a chipsy?

Jaký je rozdíl mezi brambůrky a chipsy?

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

DigiZone.cz: Funbox 4K v DVB-T2 má ostrý provoz

Funbox 4K v DVB-T2 má ostrý provoz

Vitalia.cz: Kterou dýni můžete jíst za syrova?

Kterou dýni můžete jíst za syrova?

Podnikatel.cz: Takhle se prodávají mražené potraviny

Takhle se prodávají mražené potraviny

DigiZone.cz: Světový pohár v přímém přenosu na ČT

Světový pohár v přímém přenosu na ČT

Vitalia.cz: Jak Ondra o astma přišel

Jak Ondra o astma přišel

120na80.cz: Hrbatá prsa aneb mýty o implantátech

Hrbatá prsa aneb mýty o implantátech