HTML5 Canvas : Canvasin soveltuminen banneriin
Laiho, Krista (2013)
Laiho, Krista
Metropolia Ammattikorkeakoulu
2013
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2013113019180
https://urn.fi/URN:NBN:fi:amk-2013113019180
Tiivistelmä
Opinnäytetyön pääasiallisena tavoitteena oli tutkia, mikä HTML5 Canvas on ja miten sillä piirretään kaksiulotteista grafiikkaa. Canvas on melko uusi ja tehokas HTML5-elementti grafiikan, animaatioiden ja pelien toteuttamiseen suoraan selaimeen ilman kolmansien osapuolten liitännäisiä. Työn toisena tavoitteena oli tehdä banneri canvasilla ja tutkia canvasin soveltuvuutta banneriin.
Opinnäytetyön teoriaosuus perustuu laajaan lähdekirjallisuuteen, omiin havaintoihin ja käytännön kokeiluun. Teoriaosuuden ensimmäinen osa käsittelee HTML5 Canvasin taustaa, canvas-elementtiä ja 2d-kontekstia, canvasin mahdollisuuksia sekä canvasin toimivuutta. Teoriaosuuden toinen osa keskittyy canvasille piirtämiseen koodin kautta. Luku sisältää tietoa canvasin käyttöönotosta, koordinaatistojärjestelmästä, 2d-kontekstin ohjelmointirajapinnasta ja erilaisista JavaScript-kirjastoista canvasille.
Opinnäytetyön toiminnallisessa osassa tehdään banneri canvasilla ja KineticJS
-JavaScript-kirjastolla. Banneri toimi sulavasti useimmilla selaimilla ja testatuilla mobiililaitteilla. Bannerin grafiikka toistui joissain selaimissa hieman epätarkasti ja bannerin tiedostokoko oli isompi KineticJS-kirjaston vuoksi kuin useimmissa teknisissä määrityksissä sallitaan.
Opinnäytetyö on tehty itsenäisenä tutkimustyönä. Työ toimii hyvänä oppaana canvasin perusteisiin opiskelijoille ja muille verkkoteknologioista kiinnostuneille. Käytännöntyönosuus voi kiinnostaa erityisesti yrityksiä tai muita, jotka etsivät vaihtoehtoisia menetelmiä bannereiden toteuttamiseen.
Opinnäytetyön teoriaosuus perustuu laajaan lähdekirjallisuuteen, omiin havaintoihin ja käytännön kokeiluun. Teoriaosuuden ensimmäinen osa käsittelee HTML5 Canvasin taustaa, canvas-elementtiä ja 2d-kontekstia, canvasin mahdollisuuksia sekä canvasin toimivuutta. Teoriaosuuden toinen osa keskittyy canvasille piirtämiseen koodin kautta. Luku sisältää tietoa canvasin käyttöönotosta, koordinaatistojärjestelmästä, 2d-kontekstin ohjelmointirajapinnasta ja erilaisista JavaScript-kirjastoista canvasille.
Opinnäytetyön toiminnallisessa osassa tehdään banneri canvasilla ja KineticJS
-JavaScript-kirjastolla. Banneri toimi sulavasti useimmilla selaimilla ja testatuilla mobiililaitteilla. Bannerin grafiikka toistui joissain selaimissa hieman epätarkasti ja bannerin tiedostokoko oli isompi KineticJS-kirjaston vuoksi kuin useimmissa teknisissä määrityksissä sallitaan.
Opinnäytetyö on tehty itsenäisenä tutkimustyönä. Työ toimii hyvänä oppaana canvasin perusteisiin opiskelijoille ja muille verkkoteknologioista kiinnostuneille. Käytännöntyönosuus voi kiinnostaa erityisesti yrityksiä tai muita, jotka etsivät vaihtoehtoisia menetelmiä bannereiden toteuttamiseen.