Je canvas připraven pro web?
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ů.
Kdy použít <canvas>?
Napřed hlavní důvody, proč bychom chtěli dnes <canvas> použít. Mě napadají dva:
- Interaktivní grafika v prohlížeči
- Když chceme interaktivní grafické prvky, saháme často po Flashi. Flash je skvělý nástroj s pokročilým vývojovým prostředím, ale <canvas> nám umožňuje zobrazit interaktivní grafiku přímo pomocí prohlížeče bez nutnosti dalších plug-inů (které pro některé platformy nemusí vůbec existovat). V některých případech by <canvas> mohl Flash směle nahradit.
- RIA - Rich Internet Application
- Poslední dobou se na webu objevují aplikace, o kterých se nám před lety jen snilo, např. kancelářský balík od Googlu a možná se dočkáme i pokročilého grafického editoru. Často se nazývají Rich Internet Application. <canvas> může jejich tvorbu usnadnit a posunout ji o krok dál.
Ukázka použití <canvas>u
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í.
Podpora v prohlížečích
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.
Další ukázky
(následující 3 ukázky byly převzaty z projektu ExplorerCanvas):
- 2D animovaná grafika (v IE trochu pomalé)
- 3D grafika
- práce s bitmapami
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.
Používat nebo ne?
Č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.
Vše z Blog Root.cz
Zbytečné, když existuje XAML s daleko pokročilejšími možnostmi.
Kdyz nad tim premyslim, kolik prohlizecu dnes podporuje XAML a kolik canvas?
Soude podle rychlosti nasazovani .NET 2 si myslim, ze XAML (.NET 3) tak rok, možná i dva moc neuvidime.
[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.
XAML je tak otevrene jako Canvas?
Nic proti M$, ale opravdu je XAML otevrene?:)
[4]Nejsem si tím teď úplně jistej, ale specifikace XAMLu by měla být součástí .NET Framework 3.0 SDK.
[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.
[6] Já s tebou souhlasím a nerad bych srovnával to, co přináší canvas a co přináší XAML - jejich účel je úplně jiný. XAML beru na webu jako jistou alternativu k flashi.
Mno, Adobe ten editor bude delat urcite ve Flexu (vylepseny Flash). Dnesni prohlizece mu nedaji takovou homogenitu a silu jako Flash.
Mě se tedy pro grafiku víc zamlouvá SVG. Akorát mě mrzí, že FF zatím nemá podporu SVG animací. IE nemá přímou podporu žádnou, což mě zas tak moc u MS nepřekvapuje, ale to řeší plugin od Adobe.
[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 ...