Skip to content

HTML5-kangas: mikä se on ja miksi sitä käytetään

19 de kesäkuu de 2021

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 ohittavat elementin, kunnes on olemassa luotettavia työkaluja CANVAS-animaatioiden ja pelien luomiseen JavaScriptiä tuntematta.

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 muuttaa tavallinen verkkosivu dynaamiseksi verkkosovellukseksi ja muuntaa sitten sovellus mobiilisovellukseksi käytettäväksi älypuhelimissa ja tableteissa.

Jos meillä on Flash, miksi tarvitsemme kangasta?

HTML5-määrityksen mukaan 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:

  1. 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 dokumenttiobjektimallia (DOM).
    1. 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.
    2. Voit esimerkiksi luoda animaation, joka muuttuu, kun sivun jokin muu osa on vuorovaikutuksessa – kuten lomakkeen elementti täytetään. Flashin avulla eniten voit aloittaa Flash-elokuvan tai -animaation, mutta CANVAS, voit luoda monia erilaisia ​​tehosteita, jopa lisäämällä tekstin lomakekentästä animaatioon.
  2. 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ä.
    1. 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 saatavilla suositulla iOS-alustalla.

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 tehdään GIF: llä, 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 harkita 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: tä ja IE 6: ta, 7: ää tai 8: ta, dynaamisen kangasominaisuuden luominen on turhaa, koska nämä 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 mobiililaitteilla (sekä Android- että iOS-laitteilla) että moderneilla pöytätietokoneilla (päivitettynä uusimpiin selainversioihin), CANVAS-elementin käyttö 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ä. HTML5-kangasta ei kuitenkaan suositella käytettäväksi 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 verkkosivun tai sovelluksen, joka on tarkoitettu käytettäväksi ei-interaktiivisessa mediassa, kuten tulostuksessa, sinun tulee olla tietoinen siitä, että dynaamisesti päivitetty CANVAS-elementti ei välttämättä tulosta odotetulla tavalla. Saatat tulostaa nykyisen sisällön tai varasisällön.

Alusta mla apa chicago Sinun viitteesi

Kyrnin, Jennifer. ”HTML5-kangas: mikä se on ja miksi sitä käytetään.” ThoughtCo, toukokuu. 14, 2021, thinkco.com/why-use-html5-kanvas-3467995.
Kyrnin, Jennifer. (2021, 14. toukokuuta). HTML5-kangas: mikä se on ja miksi sitä käytetään. Haettu osoitteesta https://www.thoughtco.com/why-use-html5-canvas-3467995
Kyrnin, Jennifer. ”HTML5-kangas: mikä se on ja miksi sitä käytetään.” ThoughtCo. https://www.thoughtco.com/why-use-html5-canvas-3467995 (käytetty 19. kesäkuuta 2021).