HTML Canvas

Trocha odlehčení při pátku – pár hrátek s prohlížečem a grafikou

Canvas je HTML element, který umožňuje volné kreslení do stránky JavaScriptem přímo na straně klienta. Jde o obdobu CANVAS prvku známého např. z Delphi. Je přímo implementován v jádru Gecko a v Opeře.

Pro IE se používají náhrady, buď přes ActiveX komponentu DirectAnimation nebo přes VML (více o CANVAS v IE).

V Canvas lze vykreslovat od jednoduché grafiky (Gecko, Opera) přes grafy či obrázky až třeba po animované efekty (IE). Jen to praktické využití zatím není nijak valné.

Zato nepraktických příkladů si užijete až až. Například jednoduché animované bludiště coby demonstrace 3D grafiky (RayCasting – Gecko, Opera). Když jsem to viděl, zajásal jsem, že se doba her na ZX81 vrací! Být tam někde tyranosourus Rex, tak je iluze dokonalá!

Tři rozměry jsou zjevně lákavé. Podívejte se třeba na tohle autíčko v bludišti (Gecko, Opera).

A před chvílí jsem objevil naprostý extrém – totiž raytracing napsaný v JavaScriptu. Pokud máte Operu, tak se podívejte sami – Canvas Raytracer. Funguje to i v Gecku, ale než to něco zobrazí, tak se prohlížeč třikrát zeptá, jestli má skript zastavit, že je pomalý. Opera má asi rychlejší matematické operace v JS... Výsledek je zhruba takový:

canvasrender.jpg

Zajímavá hračka, co říkáte? Stačí, když si uvědomíte, že z dnešních hraček a kuriozit bývají často zítřejší standardy. :) 

Hezký pátek.

Dne 16.03.2007

Twittni

Přidej do: asdf.sk StumbleUpon Toolbar Stumble It!

Komentáře

[1] (running - WWW) 16.03.2007, 15:36:44 [X] [D]
Jenom chci dodat, že to funguje i na Macovi pod Safari, které nepoužívá Gecko, ale WebKit. Důkaz - http://i16.tinypic.com/2u61947.png (a není tam nic dodatečně doinstalováno)

[2] (Arthur Dent [openID] - WWW) 16.03.2007, 15:46:30 [X] [D]
[1] Díky za doplnění. Já Maca nemám, takže nemohu sloužit.

[3] (Človíček - WWW) 16.03.2007, 16:21:23 [X] [D]
Tak to je opravdu zajímavá hračka ani bych nevěřil co v tom jde všechno udělat, ty koule a jejich odrazy jsou úplně super

[4] (Šimon Grimmich - Mail - WWW) 17.03.2007, 17:22:54 [X] [D]
Vypadá to hodně zajímavě, asi taky vyzkouším

[5] (Martin Hassman - Mail - WWW) 20.03.2007, 09:32:04 [X] [D]
Safari melo Canvas dokonce implementovane jako prvni prohlizec a Apple ma na Canvas i IMHO nejaky patent. Specifikace http://www.whatwg.org/specs/web-apps/current-work/#the-canvas pak ze Safari vychazela.

Ja si jeste pockam, az v nem ten typek dodela toho Wolfensteina a budeme se mydlit primo v prohlizeci 8-) http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm

[6] (MzK - WWW) 25.03.2007, 16:58:59 [X] [D]
Jednoduše neuvěřitelné.. lidi co to tvoří jsou borci

[7] (Razer - WWW) 07.06.2007, 16:22:16 [X] [D]
Vzhledem k té náročnosti výpočtu jde spíš o pozítřejší standardy. Každopádně je to směr, a jen budoucnost nám řekne jestli se uchytí to a nebo něco jiného, rychlejšího.

PS: To bludiště bylo úplnej Wolfenstein :)