Artikel top billede

HTML5-udvikling: Sådan fungerer canvas-tag'et

En serie artikler giver dig overblikket over, hvordan HTML5 fungerer i browserne Chrome, Firefox, Internet Explorer, Opera og Safari. Her handler det om canvas-tag'et.

Læs også:

Her er de vigtigste funktioner i det nye HTML5

Sådan fungerer video og lyd

Sådan fungerer SVG

Sådan fungerer WebGL

Der er nok ikke noget større brud på konventionerne i HTML5 end opfindelsen af canvas-tag'et, som bruges til at reservere en rektangulær plads, hvor JavaScript-kode kan manipulere individuelle pixels.

I den oprindelige vision var HTML et markup-lag kun for dataene. Browseren var ansvarlig for at afgøre, hvordan dataene bedst muligt blev vist.

Og scalable vector graphics, som nu ofte anses for at være en del af HTML5, var den eneste rigtige måde at tegne linjer på ved at placere informationen i en endeløs strøm af tags.

Men, ak, designere tænker ikke som computerprogrammører, og de forstår ikke idéen om at adskillige datalaget fra præsentationslaget. Når designere placerer et bogstav eller en form et sted, så vil de have, at den bliver på plads - ellers er designets harmoni ødelagt for evigt.

Løsningen er canvas-elementet. Det er en idé, der kommer fra Apple, som inkorporerede canvas i sit WebKit-projekt. Derfra blev det kopieret af alle undtagen Microsoft. Til sidst overgav også Microsoft sig og tilføjede elementet i Internet Explorer 9, men kun efter at have indset, at alle brugte et frit tilgængeligt oversættelsesværktøj, der overførte alle metoderne fra canvas-elementet til deres egne versioner.

Selvom Microsoft har taget standard-versionen til sig, er der stadig forskelle i resultaterne. Philip Taylor har bygget et meget udførligt sæt test af canvas-objektet, der gennemgår alle de forskellige måder, JavaScript kan påføre farve.

Mange af de mest almindelige rutiner - såsom tegningen af en linje - implementeres nu på mere eller mindre samme måde i alle browsere.

Der er dog forsat overraskende mange områder, hvor browserne ikke producerer de samme resultater fra den samme kode. Mange af rutinerne for rendering af tekst og gradienter opfører sig ret forskelligt eller crasher simpelthen.

Sådan fungerer canvas-tag'et

For at teste canvas-tag'et har jeg bygget et sæt svævende, animerede links ved hjælp af et jQuery-plugin skrevet af Graham Breach.

Koden leder efter et sæt links i din HTML og begynder derefter at tegne dem ind i en sky, der roterer som reaktion på musemarkørens placering. Denne test illustrerer lidt af, hvad der kan opnås med canvas-elementet.

Koden fungerer ikke i IE8 og tidligere versioner af Internet Explorer, som ikke understøtter canvas direkte, men den vil fungere, hvis man bruger et tyndt oversættelseslag ved navn ExplorerCanvas. Denne kode vil lave kald til canvas om til kode, der kan fortolkes af tidligere browsere, navnlig en teknologi som Microsoft kalder vector markup language (VML).

Dette oversættelseslag vil være nødvendigt for enhver, der har brug for at understøtte ældre, men stadig meget udbredte versioner af IE.

Indbygget understøttelse af canvas i aktuelle browsere:

Apple Safari 5.0: Ja
Google Chrome 8.0: Ja
Microsoft IE 8.0/9.0: Nej/Ja
Mozilla Firefox 3.6: Ja
Opera 10.60: Ja

Læs også:

Her er de vigtigste funktioner i det nye HTML5

Sådan fungerer video og lyd

Sådan fungerer SVG

Sådan fungerer WebGL




Brancheguiden
Brancheguide logo
Opdateres dagligt:
Den største og
mest komplette
oversigt
over danske
it-virksomheder
Hvad kan de? Hvor store er de? Hvor bor de?
Targit A/S
Udvikling og salg af software til business intelligence.

Nøgletal og mere info om virksomheden
Skal din virksomhed med i Guiden? Klik her

Kommende events
Sådan bruger du aktivt AI til at styrke din cybersikkerhedsindsats

Kan AI styrke din cybersikkerhed og forebygge f.eks. ransomwareangreb? Ja – og endda særdeles effektivt! På denne konference kan du blive klogere på, hvordan du i praksis anvender AI til at styrke dit sikkerhedsniveau – og gøre cyberbeskyttelsen mere fleksibel.

27. november 2024 | Læs mere


Styrk din virksomhed med relevant, pålidelig og ansvarlig AI integration med SAP

Kom og få indsigt i, hvordan du bruger AI til at transformere og effektivisere dine arbejdsgange. Vi kigger nærmere på AI-assistenten Joule, der vil revolutionere måden, brugerne interagere med SAP’s forretningssystemer. Og så får du konkret viden om, hvordan du kommer i gang med at bruge AI til at booste din forretningsudvikling.

03. december 2024 | Læs mere


Fyr op under vækst med dataanalyse, AI og innovation

Hvor langt er den datadrevne virksomhed nået i praksis? Det kan du høre om fra virksomheder, som har foretaget transformationen. Du kommer også til at høre, hvordan de anvender AI i processen, hvilke mål de har nået, hvordan de har høstet gevinsterne og hvilke nyskabelser, der er på vej i horisonten.

04. december 2024 | Læs mere