HTML5 kankaalle

Tämä elementti hyödyttää muuta teknologiaa

HTML5 sisältää jännittävän elementin nimeltä CANVAS. Se on paljon käyttötarkoituksia, mutta sen käyttämiseksi sinun täytyy oppia JavaScript, HTML ja joskus CSS.

Tämä tekee CANVAS-elementistä melko pelottavan monille suunnittelijoille, ja itse asiassa useimmat luultavasti jättävät huomiotta elementin, kunnes on olemassa luotettavia työkaluja CANVAS-animaatioiden ja -pelien luomiseen JavaScriptin tuntematta.

Mitä HTML5-kankaita käytetään

HTML5 CANVAS-elementtiä voidaan käyttää monissa asioissa, jotka aiemmin tarvitsivat sulautetun sovelluksen, kuten Flashin, luomaan:

• dynaaminen grafiikka
• online-ja offline-pelejä
• animaatiot
• interaktiivinen video ja ääni

Itse asiassa tärkein syy, jonka vuoksi ihmiset käyttävät CANVAS-elementtiä, johtuu siitä, kuinka helppoa on muuttaa tavallinen verkkosivu dynaamisiksi verkkosovelluksiksi ja sitten muuntaa sovellus mobiilisovelluksi käytettäväksi älypuhelimissa ja tablet-laitteissa.

Jos meillä on salama, miksi tarvitsemme kankaita?

HTML5-määrityksen mukaan CANVAS-elementti on:

"... resoluutio-riippuvainen bittikarttatekniikka, jota voidaan käyttää kuvaajien, peligrafiikan, taiteen tai muiden visuaalisten kuvien esittämisessä lennossa."

CANVAS-elementin avulla voit piirtää grafiikkaa, grafiikkaa, pelejä, taidetta ja muita grafiikoita heti web-sivulla 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: ään. Skriptit, jotka kiinnittyvät siihen, ovat joko HTML: ssä tai linkitetyssä ulkoisessa tiedostossa. Tämä tarkoittaa, että CANVAS-elementti on osa dokumenttimallimallia tai DOM.
  • Flash on upotettu ulkoinen tiedosto. Se käyttää joko EMBED- tai OBJECT-elementtiä, eikä se voi olla suoraan yhteydessä muiden HTML-elementtien kanssa. Koska CANVAS-elementti on osa DOM: ia, se voi olla vuorovaikutuksessa DOM: n kanssa monella tavalla.
  • Voit esimerkiksi luoda animaation, joka muuttuu, kun jonkin muun sivun osassa on vuorovaikutuksessa - kuten lomakkeen elementti täytetään. Flash-ohjelmalla eniten voit tehdä Flash-elokuvan tai animaation käynnistämisen, mutta CANVAS: lla voit luoda monia erilaisia ​​tehosteita, jopa lisäämällä tekstin lomakekenttään animaatioon.
• CANVAS-elementtiä tukevat verkkoselaimet natively. Jotta käyttäjät todella käyttäisivät Flashia, niiden selaimessa on oltava plugin asennettuna. Tämä on usein haittaa useimmille ihmisille johtuen vanhentuneista Flash-asennuksista tai siitä, että käyttöjärjestelmä ei yksinkertaisesti tue sitä.
  • Se oli, että jokaisella selaimella oli plugin asennettu, mutta se ei enää ole, ja monet jopa poistavat laajennuksen vaikeuksien vuoksi. Lisäksi se ei ole edes saatavilla suosittua iOS-alustalla.

Canvas on hyödyllinen myös, jos et ole koskaan suunnitellut käyttämään Flashia

Yksi tärkeimmistä syistä, miksi CANVAS-elementti on niin sekava, on se, että monet suunnittelijat ovat tottuneet täysin staattiseen verkkoon. Kuvat saattavat olla animoituja, mutta se on tehty GIF: llä, ja tietysti voit upottaa videon sivuiksi, mutta taas se on staattinen video, joka istuu vain sivulle ja ehkä käynnistyy tai pysähtyy vuorovaikutuksen ansiosta.

CANVAS-elementin avulla voit lisätä web-sivuillesi paljon enemmän interaktiivisuutta, koska nyt voit hallita grafiikkaa, kuvia ja tekstiä dynaamisesti komentosarjakieltä. CANVAS-elementti auttaa kääntämään kuvia, valokuvia, kaavioita ja kaavioita animoituihin elementteihin.

Milloin Harkitse Canvas-elementin käyttämistä?

Yleisösi tulisi olla ensimmäinen huomio, kun päätät käyttää CANVAS-elementtiä.

Jos yleisösi käyttävät ensisijaisesti Windows XP: tä ja IE 6: ta, 7: ta tai 8: ta, dynaaminen kanava-ominaisuus luodaan hyödytön, koska selaimet eivät tue sitä.

Jos rakennat sovellusta, jota käytetään vain Windows-koneissa, Flash voi olla paras panostuksesi. Sovellus, jota käytetään Windows- ja Mac-tietokoneissa, voisi hyötyä Silverlight-sovelluksesta.

Kuitenkin, jos sovellustasi on katsottava mobiililaitteilla (sekä Android että iOS) ja nykyaikaisilla pöytätietokoneilla (päivitetty uusimpiin selainversioihin), CANVAS-elementti on hyvä valinta.

Muista, että tämän elementin avulla voit saada varalle asetettuja vaihtoehtoja, kuten staattisia kuvia vanhemmille selaimille, jotka eivät tue sitä.

Ei kuitenkaan ole suositeltavaa käyttää HTML5-kangasta kaiken. Älä koskaan käytä sitä sellaisissa asioissa kuin logo, otsikko tai navigointi (vaikka käytät sitä animoitavaksi, osa näistä olisi hieno).

Selostuksen mukaan sinun on käytettävä elementtejä, jotka sopivat parhaiten siihen, mitä yrität rakentaa. Niinpä HEADER-elementin käyttäminen kuvien ja tekstin kanssa on suositeltava CANVAS-elementille otsakkeellesi ja logolle.

Lisäksi, jos luot verkkosivun tai sovelluksen, joka on tarkoitettu käytettäväksi ei-interaktiivisessa mediassa, kuten tulostuksessa, kannattaa olla tietoinen siitä, että dynaamisesti päivitetty CANVAS-elementti ei välttämättä tulosta odotetulla tavalla. Saatat saada tuloksen nykyisestä sisällöstä tai varasisällöstä.