KAPITOLA 11. Kreslení v prohlížeči. Jazyk SVG

Transkript

1 KAPITOLA 11 Kreslení v prohlížeči Možná budete chtít ve svých webových aplikacích dynamicky zobrazovat diagramy, grafy nebo jinou vizuální reprezentaci dat. Samozřejmě můžete data odeslat na server a nechat jej vygenerovat potřebné obrázky, ale proč se namáhat, když můžete nechat kreslit prohlížeč? Je k dispozici několik funkcí, které vám umožní kreslit grafické prvky v prohlížeči. Tato kapitola vám představí dvě technologie v moderních webových prohlížečích, které vám umožní kreslit vektoru grafiku SVG (Scalable Vector Graphics) a VML (Vector Markup Language). Rovněž uvidíte komponenty třetích stran, které používají jednu z uvedených technologií a umožní vám kreslit diagramy, grafy a jiné grafické prvky. Nakonec se dozvíte o novém elementu jazyka HTML 5 pro kreslení na vašich stránkách. Jazyk SVG Jak víte z předchozí kapitoly, běžné grafické soubory typu GIF, JPG a PNG obsahují binární data. Jsou navrženy tak, že se zobrazí s jejich původními rozměry. Takové obrázky nelze zvětšovat nebo zmenšovat, aniž by nedošlo ke ztrátě kvality obrázku. Naproti tomu vektorové obrázky je možné zvětšovat a zmenšovat bez ztráty kvality. Toho dosahují definováním jednotlivých prvků obrázku čar, tvarů, barev, přechodů a dalších prvků, které společně tvoří výsledný obrázek. Příkladem vektorové grafiky jsou soubory písem. Je možné měnit velikost písma bez ztráty kvality. Kdykoliv změníte velikost písma, přepočítá se zobrazení písma podle čar a tvarů, které tvoří jednotlivá písmena.

2 324 Část III: Prezentace SVG (Scalable Vector Graphics) je doporučení konsorcia W3C ( popisující speciální formát XML pro zobrazení dvourozměrné vektorové grafiky ve webovém prohlížeči. Vztah SVG a grafického obsahu lze srovnat se vztahem jazyka XHTML k textovému obsahu. Ve skutečnosti jazyk SVG umí spolupracovat, stejně jako jazyk XHTML, s dalšími technologiemi webových prohlížečů, třeba s jazykem CSS nebo modelem DOM. Jazyk SVG vznikl k tomu, aby vývojářům nabídl nativní podporu pro tento typ grafického obsahu, který dříve mohli kreslit jen pomocí doplňku Flash Player od společnosti Adobe. V současnosti se s podporou jazyka SVG setkáte v prohlížečích Firefox 1.5 a novějším, Safari 3 a novějším, Opera 9.5 a novějším a v Google Chrome. Na webu se s touto technologií setkáte zřídka, protože ji nepodporuje prohlížeč Internet Explorer a převládá doplněk Flash Player. Kód jazyka SVG je možné vkládat přímo do dokumentu XHTML nebo se na něj odkážete jako na obrázkový soubor s příponou.svg v elementu img. Element svg obsahuje elementy popisující obrázek, má tedy roli plátna pro kreslení. Uvnitř plátna můžete vybírat z nesčetného množství elementů popisujících obrázek, který chcete zobrazit. Kromě kreslení tvarů a čar můžete nahrávat externí obrázky, zobrazovat text a nastavovat přechody libovolným elementům na plátně. Tvorba obrázkových souborů SVG Nejprve se podíváme na jednoduchý soubor s obrázkem SVG. Výpis 11.1 ukazuje obsah souboru s obrázkem SVG, který vytváří přechod, několik tvarů, čar a nějaký text. Uložte tento zdrojový kód do souboru s názvem my-vector.png a otevřete jej v prohlížeči s podporou technologie SVG. Měli byste vidět stránku z obrázku Výpis Jednoduchý soubor s obrázkem SVG. <?xml version= 1.0 standalone= no?> <!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN >   <svg width= 1024 height= 768 version= 1.1 xmlns= >  <lineargradient id= gradient gradientunits= userspaceonuse x1= 0 y1= 0 x2= 200 y2= 0 > <stop offset= 0 stop-color= # /> <stop offset= 1 stop-color= #cccccc /> </lineargradient>  <rect x= 20 y= 20 width= 200 height= 200 fill= url(#gradient) /> <!-- Na pozici x, y nakreslí čtverec s kulatými rohy, poloměr zakulacení je dán hodnotami atributů rx a ry. Všimněte si,

3 Kapitola 11: Kreslení v prohlížeči 325 jak se atributem style mění vzhled elementu, jako by byl uvnitř dokumentu XHTML. --> <rect x= 220 y= 220 rx= 20 ry= 20 width= 250 height= 100 style= fill:#330000; />  <circle cx= 350 cy= 120 r= 50 stroke= # stroke-width= 25 fill= # />  <line x1= 20 y1= 20 x2= 320 y2= 320 style= stroke:#cccccc;stroke-width:3 />  <g font-size= 50 font-weight= bold fill= # > <text x= 200 y= 460 >Ukázkový text</text> </g> </svg> Obrázek Jednoduchý soubor s obrázkem SVG.

4 326 Část III: Prezentace Jazyk SVG v kódu jazyka HTML Samostatné soubory s kódem jazyka SVG fungují, ale neumožňují dynamické zobrazování. Když definujete obrázky přímo v dokumentu HTML, můžete dynamicky přistupovat k jednotlivým elementům plátna přes model DOM. Výpis 11.2 ukazuje, jak popsat obrázek zobrazený na obrázku 11.2 pomocí jazyka XHTML bez odkazů na externí soubory. Kód z výpisu 11.2 musíte uložit do souboru s příponou.xhtml, aby tak prohlížeč analyzoval kód jazyků XML a HTML současně. Syntaktický analyzátor jazyka XML je nezbytný pro zobrazení obrázku SVG a prohlížeč jej používá, jen když si je absolutně jistý, že dokument obsahuje kód v jazyku XML. Toho lze dosáhnout nastavením přípony.xhtml nebo donucením webového serveru, aby odesílal typ MIME application/xhtml+xml. Tento typ MIME byste měli používat pro všechny dokumenty XHTML místo obvyklého text/html určeného pro dokumenty HTML. Jediným důvodem, proč nepoužívat tento typ MIME, je to, že prohlížeč IE jej nerozpozná a odmítne zobrazit stránku. Výpis Jednoduchý obrázek SVG popsaný ve stránce XHTML. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmlns= lang= en xml:lang= en > <head> <title>ukázka SVG</title> </head> <body> <h1>ukázka SVG</h1> <svg width= 1024 height= 768 version= 1.1 xmlns= > <lineargradient id= gradient gradientunits= userspaceonuse x1= 0 y1= 0 x2= 200 y2= 0 > <stop offset= 0 stop-color= # /> <stop offset= 1 stop-color= #cccccc /> </lineargradient> <rect x= 20 y= 20 width= 200 height= 200 fill= url(#gradient) /> <rect x= 220 y= 220 rx= 20 ry= 20 width= 250 height= 100 style= fill:#330000; /> <circle cx= 350 cy= 120 r= 50 stroke= # stroke-width= 25 fill= # /> <line x1= 20 y1= 20 x2= 320 y2= 320 style= stroke:#cccccc;stroke-width:3 /> <g font-size= 50 font-weight= bold fill= # > <text x= 200 y= 460 >Ukázkový text</text> </g> </svg> </body> </html> Tento přístup však není vhodný pro všechny moderní webové prohlížeče. Prohlížeč IE nerozpozná příponu souboru.xhtml a typ MIME application/xhtml+xml. Přestože prohlížeč IE nepodporuje jazyk SVG, stále chcete dokumenty XHTML nahrát do prohlížeče. Je nutné jiné řešení. Specifikace kódu jazyka SVG prostřednictvím JavaScriptu Naštěstí je možné psát standardní stránky HTML a současně používat obrázky SVG, a to dynamickým přidáváním elementů jazyka SVG do stránky pomocí JavaScriptu. Musíte však zajistit, že ele-

5 Kapitola 11: Kreslení v prohlížeči 327 menty SVG budete zpracovávat analyzátorem jazyka XML. Výpis 11.3 ukazuje, jak pomocí JavaScriptu dynamicky vytvořit obrázek z obrázku Výpis Jednoduchý obrázek SVG popsaný jazykem JavaScript. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmlns= lang= en xml:lang= en > <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>ukázka SVG</title> </head> <body> <h1>ukázka SVG</h1>  <script type= text/javascript > // Metoda document.createelementns vytváří nový element pomocí // zadaného oboru názvů - v tomto případě se jedná o obor // názvů SVG, na který se odkážete adresou URL. Podle druhého // argumentu se vytváří element svg. Protože obory názvů // jsou součástí jazyků XHTML a XML, zobrazí tento element // analyzátor jazyka XML - to přesně potřebujete. var svg = document.createelementns( svg ); svg.setattribute( width, 1024 ); svg.setattribute( height, 768 ); // Dynamicky vytvoří element circle a vloží jej do dříve // definovaného plátna <svg>. var circle = document.createelementns( circle ); circle.setattribute( cx, 350 ); circle.setattribute( cy, 120 ); circle.setattribute( r, 50 ); circle.setattribute( stroke, # ); circle.setattribute( stroke-width, 25 ); circle.setattribute( fill, # ); svg.appendchild(circle); // TODO: Vytvořit další vektorové elementy stejným způsobem. // Přidáním elementu svg ke stránce zobrazíte obrázek. document.body.appendchild(svg); </script> </body> </html> Kreslení pomocí jazyka VML V roce 1998 požádala společnost Microsoft konsorcium W3C, aby zvážilo jako doporučení jejich vlastní formát vektorové grafiky založený na jazyku na bázi s názvem VML (Vector Markup Language). Protože společnosti Adobe, Sun a další také požádaly o schválení svých podobných formátů, společnost W3C se rozhodla, že vytvoří vlastní formát pro všechny, z nějž se nakonec v roce 2002 stalo doporučení SVG, které jsme si popsali v předchozí části kapitoly. Vývojáři však mají smůlu,

6 328 Část III: Prezentace protože společnost Microsoft toto doporučení SVG nepřijala (dokonce ani v prohlížeči IE 8) a neustále vylepšuje svůj vlastní formát VML. Jazyk VML podporují všechny prohlížeče Internet Explorer už od verze 5, žádné jiné prohlížeče jej však nepodporují. Univerzální knihovna vektorové grafiky by tedy musela podporovat jazyk SVG i VML, aby představovala přijatelné řešení pro vývojáře. Jazyk VML je výrazně podobný jazyku SVG a nabízí téměř shodné možnosti. Stručnější styl zápisu jazyka VML však vede k menší velikosti souborů než srovnatelný kód v jazyku SVG. Zajímavé je, že elementy jazyka VML lze pozicovat jazykem CSS a nemusí být uloženy v obklopujícím elementu, který funguje jako plátno. Elementy VML tak můžete přidávat přímo do stránky na libovolné místo. Výpis 11.4 ukazuje, jak zapsat obrázek z obrázku 11.1 do stránky HTML pomocí jazyka VML. Výpis Jednoduchý obrázek VML definovaný uvnitř stránky HTML. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmlns= lang= en xml:lang= en > <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>ukázka VML</title>  <style>v\: * {behavior:url(#default#vml); display: inline-block;</style>  <xml:namespace ns= urn:schemas-microsoft-com:vml prefix= v /> </head> <body> <h1>ukázka VML</h1> <v:rect style= position: absolute; top: 20px; left: 20px; width: 200px;height: 200px fillcolor= # > <v:fill method= linear sigma color2= #cccccc angle= 90 type= gradient /> </v:rect> <v:oval style= top: 120px; left: 350px; width: 50px; height: 50px; fillcolor= # strokecolor= # strokeweight= 25px /> <v:line from= 20px,20px to= 320px,320px strokecolor= #cccccc strokewidth= 3px />  <v:rect style= top=460px; left=200px; width=500; height=100 > <v:textbox> <span style= font-size: 50px; font-weight: bold; color: #333333; > Ukázkový text </span> </v:textbox> </v:rect> </body> </html>

7 Kapitola 11: Kreslení v prohlížeči 329 Vytváření dynamických grafů pomocí znovupoužitelné knihovny pro kreslení Viděli jste, jak moderní webové prohlížeče podporují vektorovou grafiku založenou na jazyku XML, ale prohlížeč IE používá jiný formát než ostatní prohlížeče. Abyste mohli ve svých webových aplikacích používat vektorovou grafiku, musíte najít jednoduchý způsob, jak ji definovat pro tyto dva odlišné modely. Často potřebujete knihovny jazyka JavaScript, které odstraňují rozdíly mezi prohlížeči, jak vysvětlovala kapitola 2. V tomto případě můžete použít knihovnu Raphaël, což je znovupoužitelná knihovna pro JavaScript, kterou naprogramoval Dmitry Barnovskiy. Raphaël zjednodušuje tvorbu vlastní vektorové grafiky, protože nabízí univerzální a jednoduché rozhraní API. Knihovna vybírá vhodnou techniku pro kreslení vektorové grafiky v závislosti na aktuálním webovém prohlížeči SVG nebo VML. Knihovnu můžete stáhnout z domovských stránek projektu na internetové adrese kde rovněž najdete spoustu příkladů. Komprimovaná knihovna má přibližně 53 KB. Jak jste viděli, každý grafický objekt jazyka SVG a VML je také objektem modelu DOM, což znamená, že u něj můžete zpracovávat události nebo jej dynamicky upravit jako jakýkoliv jiný element stránky. Příklad předpokládejme, že budete chtít koncovým uživatelům prezentovat data pomocí čárového grafu. Data se neustále mění můžete třeba Ajaxem načítat nová data ze serveru každých 30 sekund. Když přijdou nová data, budete chtít změnit graf. Obrázek 11.2 ukazuje, co by se mohlo uživatelům zobrazit. Klepnutí na odkaz Získat nová data simuluje příjem nových dat ze serveru a aktualizuje graf. Po přejetí ukazatelem myši nad body grafu, zvýrazníte daný bod a ukážete přesnou hodnotu. Obrázek Dynamická aktualizace grafu.

8 330 Část III: Prezentace Výpis 11.5 ukazuje, jak dynamicky vytvořit graf z obrázku 11.2 na stránce HTML, a to pomocí knihovny Raphaël, která zaručí kompatibilitu mezi prohlížeči. Nejprve vytvoříte prázdné plátno a potom nakreslíte mřížku a přidáte popisky x-ových a y-ových os. Potom zanesete data a zobrazíte mezi nimi čáry. Když uživatel klepne na tlačítko Získat nová data, prohlížeč náhodně vygeneruje nová data, smaže současné čáry a body z plátna a nahradí je novými. Výpis Kreslení dynamického grafu pomocí knihovny Raphaël. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmlns= lang= en xml:lang= en > <head> <title>dynamický graf</title> <meta http-equiv= content-type content= text/html;charset=utf-8 /> </head> <body> <h1>dynamický graf</h1>  <p id= button ></p>  <div id= canvas ></div>  <script type= text/javascript src= $.js ></script>  <script type= text/javascript src= raphael.js ></script>  <script type= text/javascript > // Definuje nový konstruktor pro kreslení grafu. var Graph = function(input) { // Očekává popisky pro x-ovou osu ve tvaru pole, samotné // hodnoty jako pole, šířku a výšku plátna a element, do // kterého přidáte toto plátno. this.labels = input.labels []; this.data = input.data []; this.width = input.width 600; this.height = input.height 300; this.element = input.element $.Elements.create( div ); // Vytvoří nové univerzální plátno pomocí knihovny // Raphaël. Vlastnost paper představuje objekt, na kterém // budete moct později volat metody pro změnu plátna. this.paper = Raphael(this.element, this.width, this.height); // Stanovení maximální hodnoty z pole dat, zaokrouhlené na // stovky - tato hodnota bude maximální hodnotou y-ové osy // grafu. this.maximumdatavalue = Math.ceil(Math.max.apply(Math, this.data) / 100) * 100; // Metoda buildgrid kreslí mřížku na plátno včetně popisků

9 Kapitola 11: Kreslení v prohlížeči 331 // os a vrátí souřadnice x a y pozice mřížky (včetně místa // na popisky) a šířku a výšku mřížky (bez popisků). this.buildgrid = function() { // Definuje výšku a šířku pro popisky os. var xlabelheight = 20, ylabelwidth = 20; // Stanoví souřadnice x a y mřížky a šířku a výšku mřížky // (bez popisků os). var x = ylabelwidth, y = 20; var width = this.width - ylabelwidth; var height = this.height - xlabelheight - y; // Vypočítá, kolik čar mřížky v každém směru zobrazit. var horizlines = this.data.length * 2; var vertlines = (this.maximumdatavalue / 10); // Mřížku nakreslí ve světle šedé barvě (barva #ccc) // pomocí knihovny Raphaël. this.paper.drawgrid(x, y, width, height, horizlines, vertlines, #ccc ); // Funkce drawxlabels vytvoří a rozmístí popisky x-ové // osy grafu. var drawxlabels = function() { for (var index = 0, length = this.data.length; index < length; index++) { var x = ylabelwidth + ((index / this.data.length) * width) + (width/(2 * this.data.length)); var y = this.height - (xlabelheight/2); // Knihovna Raphaël nakreslí text popisku na // plátno. this.paper.text(x, y, this.labels[index]).attr({ font : 10px Arial, stroke: none, fill: #000 );.call(this); // Funkce drawylabels vytvoří a umístí popisky y-ové // osy na základě dříve vypočítané maximální hodnoty, // zaokrouhlené na stovky - to vám umožní použít pěkně // zaokrouhlená čísla jako popisky os. var drawylabels = function() { for (var index = 0, length = vertlines; index <= length; index++) { var labeltext = (index * this.maximumdatavalue) / vertlines; var labelposition = height - (vertlines * index * height / this.maximumdatavalue) + y; // Knihovna Raphaël nakreslí text popisky na // plátno. this.paper.text(ylabelwidth / 2, labelposition, labeltext).attr({ font : 10px Arial, stroke: none, fill: #000 );

10 332 Část III: Prezentace.call(this); // Vrátí souřadnice x a y počátku mřížky na plátně, // spolu se šířkou a výškou mřížky. return { x: x, y: y, width: width, height: height // Zavolá metodu buildgrid, návratovou hodnotu uloží // do vlastnosti grid. this.grid = this.buildgrid(); // Metoda drawpath zakreslí body a čáry do mřížky. this.drawpath = function() { // Když kreslíte čáru knihovnou Raphaël, vytvoříte cestu // a nastavíte ji šířku pomocí hodnoty stroke-width. var pathattributes = { stroke: #333, stroke-width : 4, stroke-linejoin : round ; this.path = this.paper.path(pathattributes); // Vytvoří pole pro uložení odkazů na body, text // a tvary, které se chystáte nakreslit do mřížky. this.points = []; this.text = []; this.rects = []; // Prochází jednotlivé položky pole dat. for (var index = 0, length = this.data.length; index < length; index++) { // Vypočítá souřadnice x a y pozice bodu ve // mřížce, který bude odpovídat aktuální položce. var x = this.grid.x + (index * (this.grid.width / this.data.length)) + (this.grid.width / (2 * this.data.length)); var y = this.grid.y + this.grid.height - (this.data[index] * this.grid.height / this.maximumdatavalue); // První položka bude mít bod, do kterého nepovede // čára. K ostatním bodům povedou čáry. if (index == 0) { this.path.moveto(x, y, 10); else { this.path.lineto(x, y, 10); // Funkce drawpoints zakreslí body do mřížky, ke // všem bodům přidá popisky, které se zobrazí, když // uživatel najede ukazatelem myši nad neviditelnou // obdélníkovou oblast okolo něj. Díky tomu nemusí

11 Kapitola 11: Kreslení v prohlížeči 333 // uživatel vyhledávat malé body ve mřížce, aby // uviděl s nimi spojené textové popisky. var drawpoints = function(){ // Do mřížky nakreslí neviditelný obdélník // okolo bodu představujícího aktuální hodnotu. // Hodnota průhlednosti 0 učiní obdélník // neviditelným, ale stále zůstane v mřížce. var rect = this.paper.rect(this.grid.x + (this.grid.width * index / this.data.length), this.grid.y, (this.grid.width * (index + 1) / this.data.length), this.grid.height).attr({stroke: none, fill: #fff, opacity: 0); // Přidá objekt obdélníku do pole. this.rects.push(rect); // Nakreslí bod představující aktuální // hodnotu do mřížky a přidá jej do pole // všech bodů. var point = this.paper.circle(x, y, 5).attr({ fill : #333 ); this.points.push(point); // Nakreslí textový popisek nad bod a přidá // jej do pole popisků. var text = this.paper.text(x, y - 15, this.data[index]).attr({ font : 10px Arial, stroke: none, fill: #000 ); this.text.push(text); // Protože elementy XML, které představují // tvary nebo objekty na plátně, lze ovlivnit // modelem DOM, můžete použít metody modelu DOM, // například insertafter jako u elementů HTML. text.insertafter(dot); // Textový popisek schováte. text.hide(); // K elementům plátna můžete přidávat události, // protože se chovají stejně jako běžné // elementy HTML. Pomocí knihovny Raphaël dynamicky // změníte barvu a velikost bodu a zobrazíte // textový popisek, když uživatel přesune // ukazatel myši na neviditelný obdélník // obklopující daný bod. rect.mouseover(function(){ point.attr({ fill : #999, r : 7 ); text.show(); ); // Pokud uživatel přesune ukazatel myši mimo

12 334 Část III: Prezentace // obdélník obklopující bod, opět schováte text // a bodu vrátíte původní velikost a barvu. rect.mouseout(function(){ point.attr({ fill : #333, r : 5 ); text.hide(); );.call(this) // Zavolá právě definovanou metodu drawpath. this.drawpath(); // Metoda replacedata odstraní vektory z mřížky, mřížku // ponechá netknutou, takže do ní můžete vložit nová data. this.replacedata = function(data) { // Nová data předáte metodě jako argument a současná // data nahradíte těmito novými daty. this.data = data; // Odstraní čáru ze mřížky. this.path.remove(); // Body se odstraní z mřížky jeden po druhém. for (var index = 0, length = this.points.length; index < length; index++) { this.points[index].remove(); // Z mřížky odstraní textové popisky. for (var index = 0, length = this.text.length; index < length; index++) { this.text[index].remove(); // Odstraní neviditelné obdélníky z mřížky. for (var index = 0, length = this.rects.length; index < length; index++) { this.rects[index].remove(); // Provede metodu drawpath, která opět nakreslí čáru, // body a textové popisky do mřížky tentokrát // použije nová data. this.drawpath(); // Vytvoří objekt třídy Graph, předá mu data, popisky // a element modelu DOM, do kterého se umístí nový graf. var mygraph = new Graph({ labels: [2004, 2005, 2006, 2007, 2008, 2009], data: [0, 47, 32, 100, 78, 89], element: document.getelementbyid( canvas ) );

13 Kapitola 11: Kreslení v prohlížeči 335 // Do stránky vloží tlačítko Získat nová data, když na // něj uživatel klepne, vygenerujete novou sadu náhodných // dat. To simuluje získání nových skutečných dat ze serveru // Ajaxem. var getnewdata = $.Elements.create( a ); getnewdata.innerhtml = Získat nová data ; document.getelementbyid( button ).appendchild(getnewdata); $.Events.add(getNewData, click, function(e) { e.preventdefault(); // Generuje novou sadu náhodných dat, všechny hodnoty // budou z rozmezí 0 až 100. var data = []; for (var index = 0, length = 5; index < length; index++) { data.push(math.round(math.random() * 100)); // Zavolá metodu replacedata objektu třídy Graph, která // zobrazí novou sadu dat do mřížky. mygraph.replacedata(data); ); </script> </body> </html> Měli byste se seznámit se všemi funkcemi, které tato knihovna nabízí. Můžete je použít, kdykoliv budete zobrazovat vektorovou grafiku dynamicky ve svých RIA aplikacích. Značka <canvas> jazyka HTML 5 Funkce Mac OS X Dashboard používá jazyk HTML, CSS a JavaScript pro zobrazení malých aplikací, například hodin, kalendářů, počasí a kurzu akcií. Když vývojáři ze společnosti Apple tuto funkci vytvářeli, zavedli do jazyka HTML novou značku, která umožňuje kreslit grafické prvky pro tyto aplikace. Značka <canvas> se stala doporučením společnosti WHATWG a jeho podporu zavedly prohlížeče Safari 2, Firefox 1.5, Google Chrome a Opera 9.5. Prohlížeč IE tento element nepodporuje ani ve verzi 8 (všichni si však přejí, aby jej budoucí verze podporovaly). Jak popisuje konec této části kapitoly, někdo si dal tu práci a implementoval značku <canvas> v prohlížeči IE doplňkem Flash Player. Na rozdíl od jazyka SVG nevkládáte v případě elementu canvas>žádné elementy přímo do stránky, místo toho vytváříte grafické prvky dynamicky pomocí rozhraní API v jazyku JavaScript. Grafické prvky v tomto elementu nelze ovlivnit jazykem CSS, nejsou přístupné přes model DOM a není možné jim pomocí modelu DOM přiřazovat události. Jestliže chcete grafickým prvkům přiřadit události, použijte raději jazyk SVG. V tomto elementu jsou dovolené jen dva základní tvary obdélníky a čáry, které lze ohýbat a upravovat tak, aby vytvořily všechny požadované tvary. Samotné grafické prvky nejsou založeny na vektorech, když budete chtít upravit velikost grafických prvků v elementu, budete muset napsat pro tento účel kód podle grafických prvků, které přidáváte. Výhodou elementu canvas je, že umožňuje vkládat a upravovat obrázky, což není v jazyku SVG jednoduché. Efektivita elementu canvas překonává jazyk SVG, zejména u velkých a složitých grafic-

14 336 Část III: Prezentace kých prvků. Je to pravděpodobně kvůli tomu, že SVG udržuje odkazy na všechny grafické elementy v podobě elementů modelu DOM to element canvas nedělá. Výpis 11.6 ukazuje, jak pomocí elementu canvas nakreslit obdélník s barevným přechodem do stránky HTML. Výpis Jednoduchý obrázek v elementu canvas. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html xmlns= xml:lang= en lang= en > <head> <title>ukázka elementu canvas</title> </head> <body> <h1>ukázka elementu canvas</h1>  <canvas id= canvas width= 300 height= 300 ></canvas>  <script type= text/javascript > // Uloží odkaz na element canvas. var canvas = document.getelementbyid( canvas ); // Kreslící plocha v elementu canvas se nazývá kontext // zobrazení. Kreslící metody se vážou k tomuto kontextu, proto // na něj musíte nejprve získat odkaz. V současné době element // canvas podporuje pouze dvourozměrný kontext zobrazení. // V budoucnosti bude možné zobrazovat třírozměrné tvary. var context = canvas.getcontext( 2d ); // Definujete barevný přechod s barvami z rozmezí # až // #cccccc, kde barvy přechází vodorovně na 200 pixelech. var gradient = context.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, # ); gradient.addcolorstop(1, #cccccc ); // Abyste mohli použít přechod pro obdélník, definujete // přechod jako styl výplně a provedete metodu fillrect. context.fillstyle = gradient; // Nakreslí čtverec s tímto přechodem na pozici (20, 20) // o velikosti 200 pixelů. context.fillrect(20, 20, 200, 200); </script> </body> </html> Společnost Mozilla nabízí užitečný návod k elementu canvas a souvisejícímu rozhraní API na internetové adrese Ukázky elementu canvas od dalších vývojářů najdete na webových stránkách Canvas Demos ( Kvůli chybějící podpoře elementu canvas se vývojář Grant Jones rozhodl, že vytvoří vlastní implementaci tohoto elementu v doplňku Flash. Jím vytvořený kód kopíruje rozhraní API elementu canvas

15 Kapitola 11: Kreslení v prohlížeči 337 v prohlížeči IE a odešle jej komponentě Flash. Snažil se zjistit, jestli tento přístup umožní rychlejší kreslení grafických prvků v prohlížeči IE, aniž by k tomu použil jazyk VML, který najdete například v knihovně Raphaël. Výsledek své práce popsal v článku na internetové adrese blog/post/flash-canvas/. Jeho experimenty odhalily, že tento přístup neumožní rychlejší zobrazení, než umožňují přirozené funkce. Komunikace mezi jazykem JavaScript a doplňkem Flash je pomalá a čím více komunikujete, tím získáte výsledek pomaleji. Pomocí testu odhalil, že technika s doplňkem Flash je 40krát pomalejší než zobrazování elementem canvas v jiných prohlížečích. Měli byste tedy zatím raději používat knihovnu Raphaël a nespoléhat se na doplňky třetích stran. Shrnutí V této kapitole jste se dozvěděli o různých technologiích pro kreslení vektorové grafiky v moderních webových prohlížečích. Poznali jste knihovnu, která vám umožní lehce kreslit vektorovou grafiku nezávisle na webovém prohlížeči. Rovněž jste se dozvěděli o novém elementu jazyka HTML 5 pro dynamické kreslení grafických prvků do stránky. V poslední kapitole této knihy se znovu vrátím k tématu přístupnosti, naučím vás vytvářet co možná nejpřístupnější RIA aplikace, a to pomocí soudobých technik a vznikajících webových standardů.