HTML5 Canvas -ohjelmointikirjastot
Loading...
Journal Title
Journal ISSN
Volume Title
Perustieteiden korkeakoulu |
Master's thesis
Unless otherwise stated, all rights belong to the author. You may download, display and print this publication for Your own personal use. Commercial use is prohibited.
Author
Date
2016-09-26
Department
Major/Subject
Mediatekniikka
Mcode
IL3011
Degree programme
Tietotekniikan koulutusohjelma
Language
fi
Pages
63 + 5
Series
Abstract
Verkkosivujen tekninen kehitys on siirtymässä vahvasti ilman selainliitännäisiä toimiviin sivustoihin. HTML5-standardin mukana kehitetty Canvas-elementti tarjoaa ne graafiset ominaisuudet, jotka oli aiemmin mahdollista toteuttaa vain selainliitännäisten avulla. Tässä tutkimuksessa tarkastellaan HTML5 Canvas-elementin ohjelmointiin tarkoitettuja ohjelmointikirjastoja. Tavoitteena on löytää tehokas, kaupalliseen käyttöön soveltuva kirjasto, joka täyttää tutkimuksessa asetetut vaatimukset. Tutkimuksessa tarkasteltiin 42 ohjelmointikirjastoa, jotka on julkaistu kaupallisen käytön sallivalla avoimen lähdekoodin lisenssillä. Kirjastoista seitsemän täytti tutkimuksessa asetetut, teknisiä ominaisuuksia ja kehitysprojektin laatua koskevat vaatimukset. Näille kirjastoille tehtiin suoritustehokkuutta ja muistinkäyttöä mittaavat testit. Teknisessä testauksessa ohjelmointikirjastoilla koostettiin vektori- ja bittikarttagrafiikkaa piirtävät vertailuohjelmat. Testiohjelmilla mitattiin ruudunpäivitysnopeus sekä varatun muistin määrä. Testit suoritettiin sekä pöytätietokoneella että mobiiliympäristössä varioiden ruudulle piirrettävän grafiikan määrää. Tutkimuksessa saadut tulokset osoittavat, että HTML5 Canvas-ohjelmistokirjastoilla on selviä eroja suoritustehokkuudessa sekä muistinkäytössä. Tutkituista ohjelmointikirjastoista parhaiksi valikoituivat Easel.js ja Pixi.js.The development of websites is heading towards plugin-free architecture. HTML5 specification introduced a new Canvas element that includes graphical properties which could previously only be achived by using browser add-ons. This thesis examines software libraries that are geared towards development of HTML5 Canvas applications. The aim of this study is to identify a software library that is efficient, suitable for commercial use and meets the other requirements presented in this study. This study analysed 42 software libraries, which were published using open source license that enables commercial use. Seven libraries met the requirements of this study regarding technical features and qualifications that were required from the development project of the software library. These seven libraries were selected for performance and memory usage testing. The performance tests were done using sample programs that drew vector and bitmap graphics on HTML5 Canvas. The sample programs were measured for redraw speed of the graphics and memory usage. These tests were carried out on desktop and mobile environments with various number of graphical elements. In conclusion results of the study showed that there are clear differences between HTML5 Canvas libraries regarding performance and memory usage. Out of all libraries Easel.js and Pixi.js libraries were selected as the best HTML5 Canvas libraries.Description
Supervisor
Vuorimaa, PetriThesis advisor
Aalto, AleksiKeywords
HTML5, Canvas, JavaScript, ohjelmointikirjasto
