HTML5 Canvas vs SVG

HTML5 CanvasvsSVG Tīmekļa programmēšana 2. konference Autors: Andris Jansons 2012

Zoo

HTML5 Canvas • Sākotnēji izstrādāts priekš Mac OS X Dashboard • Vēlāk iekļauts HTML5 specifikācijā (2006.g.) • Nodefinē laukumu tīmekļa lapā uz, kura var kaut ko uzzīmēt • Grafiki • Foto apstrāde • Animācijas • 3D modeļi • Zīmēšana notiek ar Javascript valodas palīdzību

HTML5 Canvas piemērs • Jāizveido virsma <canvas id="canvas" width=«350" height=«350"></canvas> • No Javascriptpiesaistamiescanvas elementam un varam kaut ko uzzīmēt varcanvas = document.getElementById('canvas'); if (canvas.getContext) { varctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0,0,200)"; ctx.fillRect (10, 10, 350, 350); }

SVG • Pirmie mēģinājumi ieviest 1999.g. • XML tipa iezīmēšanas valoda ar, kuru apraksta 2D objektus • SVG attēlam ir tas pats kas HTML tekstam • Attēli tiek būvēti no primitīviem objektiem – riņķi, trīsstūri, taisnstūri, līnijas u.t.t. • Objektu īpašības var mainīt ar skripta valodas palīdzību • Valodā ir iebūvētas dažādas iespējas, piemēram, objektu animācijas

SVG piemērs • Jādefinē SVG tags, kurā iekšā var likt primitīvos elementus <svg> <rect width="350" height="350" fill="rgb(0,0,200)" /> </svg>

SVG animācija • Jāpievieno animācijas tags <svg> <rect width="350" height="350" fill="rgb(0,0,200)" > <animate attributeName=‘width’ attributeType=‘XML’ begin=‘0s’dur=‘16s’ fill=‘freeze’ from=‘350’ to=‘1000’/> </rect> </svg>

HTML5 Canvasvs SVG - [DOM] • SVG ir objektu bāzēts • Canvas ir pikseļu bāzēts • SVG objekti tiek pievienoti DOM kokam • Par Canvas attēlu DOM neko nezin

HTML5 Canvasvs SVG – [animācijas] • Manipulācijas ar DOM koku ir resursu prasīgas • Nav ieteicams veidot intensīvas animācijas, kurās no JavaScript tiek pievienoti, atvienoti vai pārvietoti elementi pa DOM koku • Vēlams lietot SVG valodā iebūvētās animācijas iespējas • Ja ar iebūvētajām iespējām nepietiek, var lietot Canvas

HTML5 Canvasvs SVG – [grafika] • Canvas izveidotais attēls ir rastra grafika • SVG, kā jau to pasaka nosaukums ir vektoru grafika • SVG attēli vienlīdz labi izskatās jebkurā izšķirtspējā • Lai to pašu panāktu ar Canvas ir jāparedz visas potenciālo ierīču izšķirtspējas

HTML5 Canvasvs SVG – [rīki] • Priekš SVG ir pieejami ļoti daudz rīku, kas atvieglo dzīvi • Adobe Illustrator • Apache Batik • Inkscape • ImageMagic • Raphael JS • Daudzi grafiskie redaktori ļauj saglabāt failus SVG formātā • Veidojot kaut ko ar Canvas viss ir jāraksta pašam

Secinājumi • Situācijās, kad ir nepieciešama lietotāja mijiedarbība ar grafiskajiem elementiem [Googlemaps] noteikti ērtāk lietot SVG • Situācijās, kad jāveido specifiskas animācijas [piemēram, 3D spēle, zinātniska simulācija], iespējams labāku veiktspēju var panākt ar Canvas

Paldies par uzmanību!

HTML5 Canvas vs SVG