HTML5 Canvas: Hva det er og hvorfor det brukes

HTML5 inkluderer et spennende element kalt CANVAS. Den har mange bruksområder, men for å kunne bruke den, må du lære litt JavaScript, HTML, og noen ganger CSS.

Dette gjør CANVAS-elementet litt skremmende for mange designere, og faktisk vil de fleste sannsynligvis ignorere elementet til det er pålitelige verktøy for å lage CANVAS-animasjoner og spill uten å vite det JavaScript.

Hva HTML5 lerret brukes til

HTML5 CANVAS-elementet kan brukes til mange ting som du tidligere måtte bruke et innebygd program som Flash for å generere:

  • Dynamisk grafikk
  • Online og offline spill
  • Animasjoner
  • Interaktiv video og lyd

Faktisk er den viktigste grunnen til at folk bruker CANVAS-elementet på grunn av hvor enkelt det er å slå en vanlig webside til en dynamisk webapplikasjon, og konverter deretter applikasjonen til en mobilapp for bruk på smarttelefoner og tabletter.

Hvis vi har blits, hvorfor trenger vi lerret?

Ifølge HTML5-spesifikasjon, CANVAS-elementet er: “... et oppløsningsavhengig bitmap-lerret, som kan brukes til gjengivelse av grafer, spillgrafikk, kunst eller andre visuelle bilder på farten.”

watch instagram stories

CANVAS-elementet lar deg tegne grafer, grafikk, spill, kunst og andre bilder direkte på websiden i sanntid.

Du tenker kanskje at vi allerede kan gjøre det med Flash, men det er to store forskjeller mellom CANVAS og Flash:

  1. CANVAS-elementet er innebygd rett i HTML-en. Skriptene som tegner på den, er enten i HTML-koden eller i en koblet ekstern fil. Dette betyr at CANVAS-elementet er en del av dokumentobjektmodellen (DOM).
    1. Flash er en innebygd ekstern fil. Den bruker enten EMBED eller OBJECT-elementet for å vise, og kan ikke samhandle direkte med de andre HTML-elementene. Fordi CANVAS-elementet er en del av DOM, kan det samhandle med DOM på mange måter.
    2. For eksempel kan du lage en animasjon som endres når en annen del av siden samhandles med - for eksempel et skjemaelement som fylles ut. Med Flash er det mest du kan gjøre å starte Flash-film eller animasjon, men med CANVAS kan du lage mange forskjellige effekter, til og med legge til teksten fra skjemafeltet i animasjonen.
  2. CANVAS-element støttes av nettlesere. For at brukerne faktisk skal kunne bruke Flash, må nettleseren deres ha programtillegget installert. Dette er ofte et problem for de fleste på grunn av utdaterte Flash-installasjoner eller det faktum at operativsystemet deres rett og slett ikke støtter det.
    1. Det pleide å være at hver nettleser hadde pluginet installert, men det er ikke lenger tilfelle, og mange fjerner til og med pluginet på grunn av vanskeligheter. I tillegg er det ikke engang tilgjengelig på det populære iOS-plattform.

Lerret er nyttig, selv om du aldri har planlagt å bruke blits

En av hovedårsakene til at CANVAS-elementet er så forvirrende, er at mange designere har blitt vant til et helt statisk nett. Bilder kan være animerte, men det er gjort med GIF, og selvfølgelig kan du legge inn video på sider, men igjen, det er en statisk video som bare sitter på siden og kanskje starter eller stopper på grunn av interaksjon, men det er alt.

CANVAS-elementet lar deg legge til så mye mer interaktivitet på websidene dine, for nå kan du kontrollere grafikk, bilder og tekst dynamisk med et skriptspråk. CANVAS-elementet hjelper deg med å gjøre bilder, bilder, diagrammer og grafer til animerte elementer.

Når bør du vurdere å bruke lerretelementet

Publikum bør være din første vurdering når du bestemmer deg for om du skal bruke CANVAS-elementet.

Hvis publikum først og fremst bruker Windows XP og IE 6, 7 eller 8, og det vil da være meningsløst å lage en dynamisk lerretfunksjon siden disse nettleserne ikke støtter den.

Hvis du bygger et program som bare skal brukes på Windows-maskiner, kan Flash være det beste alternativet. Et program som skal brukes på Windows- og Mac-datamaskiner, kan ha nytte av et Silverlight-program.

Imidlertid, hvis applikasjonen din må vises på mobile enheter (både Android og iOS) så vel som moderne stasjonære datamaskiner (oppdatert til de nyeste nettleserversjonene), og bruk av CANVAS-elementet er et godt valg.

Husk at bruk av dette elementet lar deg ha tilbakemeldingsalternativer som statiske bilder for eldre nettlesere som ikke støtter det.

Det anbefales imidlertid ikke å bruke HTML5 lerret til alt. Du burde aldri bruk den til ting som logoen, overskriften eller navigasjonen (selv om det ville være greit å bruke den til å animere en del av noen av disse).

I henhold til spesifikasjonen, bør du bruke elementene som passer best for det du prøver å bygge. Så å bruke HEADER-elementet sammen med bilder og tekst er å foretrekke fremfor CANVAS-elementet for topptekst og logo.

Også, hvis du oppretter en nettside eller et program som er ment å brukes i et ikke-interaktivt medium som utskrift, bør du være oppmerksom på at CANVAS-elementet som er oppdatert dynamisk, kanskje ikke skrives ut som du forventer. Du kan få en utskrift av gjeldende innhold eller av reserveinnhold.

instagram story viewer