Læs også:
Her er de vigtigste funktioner i det nye HTML5
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å:
