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

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.