HTML5 sisältää jännittävän elementin nimeltä CANVAS. Sillä on paljon käyttötarkoituksia, mutta sen käyttämiseksi sinun on opittava JavaScript, HTML, ja joskus CSS.
Tämä tekee CANVAS-elementistä hieman pelottavan monille suunnittelijoille, ja itse asiassa useimmat todennäköisesti sivuuttavat elementti, kunnes on olemassa luotettavia työkaluja CANVAS-animaatioiden ja pelien luomiseen tietämättä JavaScript.
Mihin HTML5-kangasta käytetään
HTML5 CANVAS -elementtiä voidaan käyttää moniin asioihin, joiden luomiseen jo aiemmin tarvittiin upotettua sovellusta, kuten Flash:
- Dynaaminen grafiikka
- Online- ja offline-pelit
- Animaatiot
- Interaktiivinen video ja ääni
Itse asiassa tärkein syy, miksi ihmiset käyttävät CANVAS-elementtiä, johtuu siitä, kuinka helppoa on kääntää tavallinen verkkosivu dynaamiseksi verkkosovellukseksi ja muunna sitten sovellus mobiilisovellukseksi käytettäväksi älypuhelimissa ja tabletteja.
Jos meillä on Flash, miksi tarvitsemme kangasta?
Mukaan HTML5-määritys, CANVAS-elementti on: "... resoluutiosta riippuva bittikarttakangas, jota voidaan käyttää graafien, peligrafiikan, taiteen tai muiden visuaalisten kuvien hahmottamiseen lennossa."
CANVAS-elementin avulla voit piirtää kaavioita, grafiikkaa, pelejä, taidetta ja muita grafiikoita suoraan verkkosivulle reaaliajassa.
Saatat ajatella, että voimme jo tehdä sen Flashilla, mutta CANVASin ja Flashin välillä on kaksi suurta eroa:
- CANVAS-elementti on upotettu suoraan HTML-koodiin. Sitä käyttävät skriptit ovat joko HTML-muodossa tai linkitetyssä ulkoisessa tiedostossa. Tämä tarkoittaa, että CANVAS-elementti on osa asiakirjaobjektimallia (DOM).
- Flash on upotettu ulkoinen tiedosto. Se käyttää joko EMBED- tai OBJECT-elementtiä näyttämiseen, eikä se voi olla vuorovaikutuksessa suoraan muiden HTML-elementtien kanssa. Koska CANVAS-elementti on osa DOM: ää, se voi olla vuorovaikutuksessa DOM: in kanssa monin tavoin.
- Voit esimerkiksi luoda animaation, joka muuttuu, kun sivun jokin muu osa on vuorovaikutuksessa - kuten lomakkeen elementti täytetään. Flashilla eniten mitä voisit tehdä, on aloittaa Flash-elokuva tai animaatio, mutta CANVAS-sovelluksella voit luoda monia erilaisia tehosteita, jopa lisäämällä tekstin lomakekentästä animaatioon.
- CANVAS-elementtiä tuetaan luonnollisesti verkkoselaimilla. Jotta käyttäjät voivat todella käyttää Flashia, heidän selaimessaan on oltava laajennus asennettuna. Tämä on usein vaivaa useimmille ihmisille vanhentuneiden Flash-asennusten tai sen vuoksi, että heidän käyttöjärjestelmänsä ei yksinkertaisesti tue sitä.
- Aiemmin jokaisessa selaimessa oli laajennus asennettuna, mutta näin ei enää ole, ja monet jopa poistavat laajennuksen vaikeuksien vuoksi. Lisäksi se ei ole edes saatavana suosituimmissa iOS-alusta.
Kankaasta on hyötyä, vaikka et aio koskaan käyttää Flashia
Yksi tärkeimmistä syistä, miksi CANVAS-elementti on niin sekava, on se, että monet suunnittelijat ovat tottuneet täysin staattiseen verkkoon. Kuvat voivat olla animoituja, mutta se on tehty GIF, ja tietysti voit upottaa videon sivuille, mutta jälleen kerran, se on staattinen video, joka yksinkertaisesti istuu sivulla ja ehkä alkaa tai pysähtyy vuorovaikutuksen vuoksi, mutta siinä kaikki.
CANVAS-elementin avulla voit lisätä niin paljon enemmän vuorovaikutteisuutta verkkosivuihisi, koska nyt voit hallita grafiikkaa, kuvia ja tekstiä dynaamisesti komentosarjakielellä. CANVAS-elementin avulla voit muuttaa kuvia, valokuvia, kaavioita ja kaavioita animoiduiksi elementeiksi.
Milloin kannattaa käyttää kangaselementin käyttöä
Yleisön tulisi olla ensimmäinen huomio, kun päätät CANVAS-elementin käytöstä.
Jos yleisösi käyttää ensisijaisesti Windows XP ja IE 6, 7 tai 8, dynaamisen kangasominaisuuden luominen on turhaa, koska nuo selaimet eivät tue sitä.
Jos rakennat sovellusta, jota käytetään vain Windows-koneissa, Flash voi olla paras vaihtoehto. Windows- ja Mac-tietokoneissa käytettävä sovellus voi hyötyä Silverlight-sovelluksesta.
Jos sovellustasi on kuitenkin tarkasteltava sekä mobiililaitteilla (sekä Android- että iOS-laitteilla), myös moderneina pöytätietokoneet (päivitetty uusimpiin selainversioihin), CANVAS-elementin käyttäminen on hyvä valinta.
Muista, että tämän elementin käyttäminen antaa sinulle vaihtoehtoja, kuten staattisia kuvia vanhemmille selaimille, jotka eivät tue sitä.
Ei ole kuitenkaan suositeltavaa käyttää HTML5-kangasta kaikessa. Sinun pitäisi ei koskaan käytä sitä esimerkiksi logoon, otsikkoon tai navigointiin (vaikka sen animoiminen osasta jotakin näistä olisi hieno).
Erittelyn mukaan sinun tulisi käyttää elementtejä, jotka sopivat parhaiten siihen, mitä yrität rakentaa. Joten HEADER-elementin käyttö kuvien ja tekstin kanssa on parempi kuin otsikossa ja logossa oleva CANVAS-elementti.
Lisäksi, jos luot Nettisivu tai sovelluksessa, joka on tarkoitettu käytettäväksi ei-vuorovaikutteisessa mediassa, kuten tulostuksessa, sinun on tiedettävä, että dynaamisesti päivitetty CANVAS-elementti ei välttämättä tulosta odotetulla tavalla. Saatat tulostaa nykyisen sisällön tai varasisällön.