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.

120na80.cz: Jak se zbavit nadměrného pocení?

Jak se zbavit nadměrného pocení?

Podnikatel.cz: Akční plán podpoří byznys padesátníků

Akční plán podpoří byznys padesátníků

Podnikatel.cz: Prodej na Alibabě? Malí hráči utřou nos

Prodej na Alibabě? Malí hráči utřou nos

Měšec.cz: Zelená karta – kde neplatí povinné ručení?

Zelená karta – kde neplatí povinné ručení?

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: Polská vejce na českém pultu Albertu

Polská vejce na českém pultu Albertu

Vitalia.cz: Signál roztroušené sklerózy: brnění končetin

Signál roztroušené sklerózy: brnění končetin

DigiZone.cz: Ve Varech představeni i noví "Četníci"

Ve Varech představeni i noví "Četníci"

Podnikatel.cz: Italské těstoviny nebyly k mání, tak je začal vyrábět

Italské těstoviny nebyly k mání, tak je začal vyrábět

Podnikatel.cz: Profese budoucnosti? Úředník nepřežije

Profese budoucnosti? Úředník nepřežije

Měšec.cz: Banky umí platby na kartu, jen to neříkají

Banky umí platby na kartu, jen to neříkají

Vitalia.cz: Jak může být v uzenině 150 % masa?

Jak může být v uzenině 150 % masa?

Lupa.cz: IT scéna po brexitu: přijde exodus vývojářů?

IT scéna po brexitu: přijde exodus vývojářů?

DigiZone.cz: Samsung uvolnil nástroj pro Tizen

Samsung uvolnil nástroj pro Tizen

Vitalia.cz: Pepsi Cola mění sirup za cukr

Pepsi Cola mění sirup za cukr

Lupa.cz: Největší pitominy s logem “nyní smart a připojené”

Největší pitominy s logem “nyní smart a připojené”

Lupa.cz: eIDAS: Nepřehnali jsme to s výjimkami?

eIDAS: Nepřehnali jsme to s výjimkami?

Vitalia.cz: Bio vejce nepoznají ani veterináři

Bio vejce nepoznají ani veterináři

Lupa.cz: eIDAS: elektronické dokumenty platí jako papír

eIDAS: elektronické dokumenty platí jako papír

120na80.cz: I tuto vodu můžete pít

I tuto vodu můžete pít