04.08.11   |   kl. 08:11   |   Aktuelt, HTML5, Prosabladet

Sæt Flash på porten med HTML5 og canvas

Behovet for Flash til interaktiv grafik er blevet væsentligt mindre med det nye canvas-element i HTML5, som gør det muligt at tegne i browseren.

I Coulisse, som er en HTML5-udgave af Itunes' kendte coverflow-widget, bruges canvas-metoder til at udføre en transformation af billeder.

En af de varmeste nyheder i den kommende udgave af webstandarden, HTML5, er canvas-elementet, som gør det muligt at tegne i browseren fra Javascript.

Med Internet Explorer 9 er alle de nye browsere med på canvas-vognen, og dermed bliver teknologien en alvorlig konkurrent til Flash og andre plugins, som ofte tidligere var nødvendige for at skabe interaktiv animeret 2D-grafik.

Canvas er simpelthen et rektangulært element på en webside, ligesom et div-element eller tilsvarende, men med den store forskel, at man kan tegne programmatisk fra Javascript i feltet. I Internet Explorer 9 sker det med grafikacceleration, og det samme er på vej i Firefox og Chrome, og det giver flotte og højtydende animationer.

For at tegne i et canvas-felt skal man hente et context-objekt fra DOM'en, som vist i kodeeksempel 1:

I linje 1 angives dokument-typen for HTML5, hvilket Internet Explorer 9 kræver for at genkende dokumentet som HTML5.

I linje 5 defineres canvas-feltet med id'et 'canvasfelt' og en bredde og højde på 500 gange 300 pixels.

I linje 7 fås canvas-objektet fra DOM'en på sædvanlig vis. Canvas-objektet har en getContext-metode, som skal kaldes med strengen '2D' (Der er ingen 3D-kontekst endnu, men det kan komme senere). Metoden returnerer et context-objekt, som er tegnepladen, på samme måde, som det kendes fra f.eks. Javas 2D-API.

I linje 9 og 10 anvender vi nogle af de tegnemetoder, som context-objektet kan byde på. Koordinaterne angiver som sædvanlig i computergrafik afstanden fra øverste venstre hjørne i canvas-feltet. Resultatet kan ses i figur 1:

Tegnemetoderne i canvas minder meget om dem, man finder i andre 2d-programmeringsmiljøer, så der skulle ikke være nogen uhyggelige overraskelser i farvandet.
Man er ikke begrænset til, hvad der kan tegnes med streger og polygoner. Det er også muligt at importere billedfiler ind i canvasset. Det benyttes i Coulisse (figur 2), som er en HTML5-udgave af Itunes kendte coverflow-widget. Her bruges canvas-metoder til at udføre en transformation af billeder:

Med Internet Explorer 9 benytter alle de store browsere nu den samme event-model, der går under navnet DOM Level 3 events. Det betyder, at det er væsentligt simplere at have at gøre med events.

Kodeeksempel 2 viser, hvorledes et musekliks relative koordinater i forhold til canvas-objektets øverste venstre hjørne nemt kan findes. Og så er det bare med at komme i gang med at programmere HTML5-baserede spil.

• Canvas
  

  Canvas-elementet blev opfundet af holdet bag Apples Safari-browser, blandt andet med henblik på dashboard widgets eller skrivebords-duppeditter i Safari 4. HTML5-arbejdsgruppen overtog Apples forslag og gjorde det til en del af standarden, og canvas er nu understøttet i samtlige af de store browsere, Firefox, Chrome, Safari og Opera. I lang tid var der usikkerhed og skiftende udmeldinger fra Microsoft om, hvorvidt canvas ville blive en del af Internet Explorer 9, men de gode kræfter vandt til sidst. Tillige benytter IE9 nu samme eventmodel som de øvrige browsere, hvilket gør det nemmere at programmere interaktive grafiske elementer i webapps.
  
  

• Tips til canvas-tegning
  

  Tegn "skarpe" streger: Forskyd pixel-koordinatet med 0.5: context.moveTo(0, 0.5); context.lineTo(500, 0.5);
  
  Slet canvas-feltet: Gøres med sætningen canvas.width = canvas.width
  
  Double buffering: For at undgå fnidder, når der tegnes i canvas-feltet, kan man tegne til et skjult div og så synliggøre det, når optegningen er færdig. Det næste frame i en animation kan så tegnes i et andet underliggende skjult div, og så fremdeles.
  

• Læs mere
  

  API-dokumentation om canvas-metoderne findes på WHATWG's site. Det findes nemmest ved at søge på "WHATWG canvas" i en søgemaskine.
  
  HTML5-bogen Diveintohtml.org har et kapitel om canvas. Den kan findes på samme adresse, altså Diveintohtml.org.
  

PRINT