HTML5 inkluderer et spændende element kaldet CANVAS. Det har mange anvendelser, men for at bruge det skal du lære noget JavaScript, HTML, og nogle gange CSS.
Dette gør CANVAS-elementet en smule skræmmende for mange designere, og faktisk vil de fleste sandsynligvis ignorere elementet, indtil der er pålidelige værktøjer til at oprette CANVAS-animationer og spil uden at vide det JavaScript.
Hvad HTML5 lærred bruges til
HTML5 CANVAS-elementet kan bruges til mange ting, som du tidligere måtte bruge et integreret program som Flash til at generere:
- Dynamisk grafik
- Online og offline spil
- Animationer
- Interaktiv video og lyd
Faktisk er hovedårsagen til, at folk bruger CANVAS-elementet, på grund af hvor let det er at slå en almindelig webside til en dynamisk webapplikation, og konverter derefter applikationen til en mobilapp til brug på smartphones og tabletter.
Hvis vi har flash, hvorfor har vi brug for lærred?
Ifølge HTML5-specifikation, CANVAS-elementet er: “... et opløsningsafhængigt bitmap-lærred, der kan bruges til gengivelse af grafer, spilgrafik, kunst eller andre visuelle billeder i farten.”
CANVAS-elementet giver dig mulighed for at tegne grafer, grafik, spil, kunst og andre billeder direkte på websiden i realtid.
Du tænker måske, at vi allerede kan gøre det med Flash, men der er to store forskelle mellem CANVAS og Flash:
- CANVAS-elementet er indlejret lige i HTML. De scripts, der trækker på den, findes enten i HTML-koden eller i en linket ekstern fil. Dette betyder, at CANVAS-elementet er en del af dokumentobjektmodellen (DOM).
- Flash er en integreret ekstern fil. Det bruger enten EMBED- eller OBJECT-elementet til visning og kan ikke interagere direkte med de andre HTML-elementer. Fordi CANVAS-elementet er en del af DOM, kan det interagere med DOM på mange måder.
- For eksempel kan du oprette en animation, der ændres, når en anden del af siden interageres med - såsom et formularelement, der udfyldes. Med Flash er det mest, du kunne gøre, at starte Flash-film eller animation, men med CANVAS kan du oprette mange forskellige effekter, endda tilføje teksten fra formularfeltet til animationen.
- CANVAS-element understøttes indbygget af webbrowsere. For at brugerne rent faktisk kan bruge Flash, skal deres browser have pluginnet installeret. Dette er ofte et besvær for de fleste på grund af forældede Flash-installationer eller det faktum, at deres operativsystem simpelthen ikke understøtter det.
- Det plejede at være, at hver browser havde pluginet installeret, men det er ikke længere tilfældet, og mange fjerner endda pluginet på grund af vanskeligheder. Plus, det er ikke engang tilgængeligt på det populære iOS-platform.
Canvas er nyttigt, selvom du aldrig har planlagt at bruge Flash
En af hovedårsagerne til, at CANVAS-elementet er så forvirrende, er at mange designere er vant til et helt statisk web. Billeder kan være animerede, men det er gjort med GIF, og selvfølgelig kan du integrere video på sider, men igen, det er en statisk video, der simpelthen sidder på siden og måske starter eller stopper på grund af interaktion, men det er alt.
CANVAS-elementet giver dig mulighed for at tilføje så meget mere interaktivitet til dine websider, for nu kan du styre grafik, billeder og tekst dynamisk med et script-sprog. CANVAS-elementet hjælper dig med at omdanne billeder, fotos, diagrammer og grafer til animerede elementer.
Hvornår skal man overveje at bruge lærredselementet?
Dit publikum skal være din første overvejelse, når du beslutter, om du vil bruge CANVAS-elementet.
Hvis dit publikum primært bruger Windows XP og IE 6, 7 eller 8, så vil oprettelse af en dynamisk lærredfunktion være meningsløs, da disse browsere ikke understøtter den.
Hvis du bygger et program, der kun bruges på Windows-maskiner, er Flash muligvis din bedste chance. Et program, der skal bruges på Windows- og Mac-computere, kan drage fordel af et Silverlight-program.
Men hvis din applikation skal ses på mobile enheder (både Android og iOS) såvel som moderne stationære computere (opdateret til de nyeste browserversioner), så det er et godt valg at bruge CANVAS-elementet.
Husk, at brugen af dette element giver dig mulighed for at have reserveindstillinger som statiske billeder til ældre browsere, der ikke understøtter det.
Det anbefales dog ikke at bruge HTML5-lærred til alt. Du burde aldrig brug det til ting som dit logo, overskrift eller navigation (selvom det ville være fint at bruge det til at animere en del af disse).
I henhold til specifikationen skal du bruge de elementer, der passer bedst til det, du prøver at bygge. Så at bruge HEADER-elementet sammen med billeder og tekst er at foretrække frem for CANVAS-elementet til dit header og logo.
Også, hvis du opretter en hjemmeside eller et program, der er beregnet til at blive brugt i et ikke-interaktivt medium som udskrivning, skal du være opmærksom på, at CANVAS-elementet, der er blevet opdateret dynamisk, muligvis ikke udskriver, som du forventer. Du får muligvis en udskrift af det aktuelle indhold eller af reserveindholdet.