Canvas je element adoptovaný webovými prohlížeči určený ke kreslení 2D a 3D grafiky ve webových stránkách. Spefikaci canvasu najdeme u skupiny WHATWG. Můžeme canvas už dnes na webu používat?
Vývoj webu v posledních letech přál spíše webdesignerům (zej. nové verze CSS a jejich lepší a lepší implementace v prohlížečích). Vývojáři interaktivních webových aplikací zůstávali poněkud zkrátka a každý krok vpřed vítali jásotem. Vzpomeňme si na boom AJAXu. Uvidíme, zaznamená-li <canvas> podobný boom nebo zůstane jen hračkou vývojářských nadšenců.
Napřed hlavní důvody, proč bychom chtěli dnes <canvas> použít. Mě napadají dva:
Do stránky stačí vložit element :
<canvas id="canvas" width="250" height="200"></canvas>
A můžeme do něj začít JavaScriptem kreslit:
var canvas = document.getElementById("canvas"); // overime, zda prohlizec <canvas> podporuje if (canvas.getContext) { // zvolime 2D krelici rezim (dalsi variantou by byl 3D) var context = canvas.getContext("2d"); // vykreslime ctverec context.fillRect(10, 10, 50, 50); }
Jednoduchá ukázka použití.
Při rozhodování, zda <canvas> použít, bude zásadní podpora ve webových prohlížečích. <canvas> podporují Opera i Safari, Firefox (od verze 1.5), Seamonkey a další Geckové prohlížeče. Jistě jste si všimli, že v seznamu není Internet Explorer. Naštěstí tu je projekt ExplorerCanvas, který umožňuje <canvas> v IE6 i IE7 emulovat. Proto také ukázka výše funguje i v IE. Jedná se o 20kB JavaScriptový soubor, který pomocí podmíněných komentářů vložíme do stránky.
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
Vlastní kód ve stránce již není třeba upravovat.
(následující 3 ukázky byly převzaty z projektu ExplorerCanvas):
Jako složitější ukázku lze uvést Canvascape – 3D walker, neboli pokus vytvořit pomocí <canvas>u 3D herní engine. Po kliknutí do obrázku můžete pomocí kurzorových kláves procházet bludištěm včetně skákání, nalevo vidíte mapku. Pokud vám to nepřipádá dostatečné, zkuste kliknout vpravo na textured version. Emulace v IE je zde ale již nepoužitelně pomalá.
Pěknou aplikací je CanvasPaint, snažící se napodobit klasický MS Paint (nefunguje v IE). Zde již narazíme na problémy. Prohlížeče zatím nepodporují specifikaci <canvas>u na 100%, viz dokumentace napravo.
Čas pro masové nasazení <canvas>u zatím ještě nenastal, ale myslím, že již teď je podpora v prohlížečích zralá k experimentování a – pokud se to do vašeho projektu hodí – i prvního nasazení jednodušších <canvas>ů na web. Zda se <canvas> rozšíří více, ukáže čas.
[2] WPF/E nevyžaduje .NET Framework a současné CTP nabízí pluginy pro Win (FF, IE) a Mac (Safari, FF). Jeho rozvoj je velice rychlý - díky tomu, že existuje plná implementace (WPF), která je součástí právě .NET 3.0 a je primárně určena pro desktopy. Netroufám si odhadovat, zda tato technologie sklidí nějaký větší úspěch.
[3] z meho pohleda jedna ze zasadnich myslenek pri priprave canvasu (tohle nesouvisi s kvalitou canvasu jako s filosofii pristupu) je, ze pri priprave specifikace byli pritomni vyvojari webovych prohlizecu a meli moznosti ji ovlivnovat (i vyvojari IE tu moznost meli).
Cilem bylo predejit stavu, kdy by se jednalo jen o "dalsi specifikaci lezici v supliku", nebo o novinku podporovanou jednim prohlizecem, ale aby vznikla specifikace resici nektere problemy, ktere nas trapi, a byla snadno realizovatelna na celem poli internetu. Ze se tomu take tak deje svedci soucasna podpora v prohlizecich uz v dnesnim stavu, kdy dokumentace jeste nebyla finalizovana.
Filozofie tebou zminovane technologie: "Vymyslime si specifikaci a zajistime pluginy, aby to bylo podporovane i zakladnich v konkurencnich prohlizecich" je trochu jinou cestou za trochu jinym cilem. Nijak neporovnavam vykonost technologii canvas vs. XAML (ono to nejde, oboji je o necem jinem), ale to, co jsi v [3] vyjadroval, ze XAML bude dostupny.
[9] Kazdy se hodi na neco trochu jineho http://csimms.botonomy.com/2006/02/12/svg-vs-canvas-tastes-great-or-less-filling/
No slava konecne po dlouhe dobe (mozna od ajaxu, ktery ale neni nijak standardizovany) na webu neco noveho a inovativniho, co by mohlo byt docela uzitecne a co funguje v primo prohlizeci bez nejakeho 3rd party pluginu a spolupracuje primo s ostatnimi objekty na strance...
A neni to ani X :)
je cas udelat XHTML2 pa pa ...
Martin Hassman ex-biochemik, umělecký programátor a publicista. Spoluzakladatel CZilly, zakladatel Zdrojáku, správce HTML5.cz, organizátor hackathonů, čekovacích muzejních nocí aj. akcí.
Přečteno 24 693×
Přečteno 24 225×
Přečteno 20 874×
Přečteno 19 952×
Přečteno 19 868×