Canvas

Med HTML5 er der kommet en måde at arbejde grafisk i en browser, så man kan opbygge grafiske elementer i et browservindue ved hjælp af program-kommandoer.

Der defineres et canvas element i browseren som følger:

<canvas id="grafik" width="600" height="400">
Denne tekst vises hvis browseren ikke understøtter HTML5 Canvas
</canvas>

Kontakt til Canvas

For at kunne arbejde med canvas skal man have fat i elementet, og man skal skabe den rigtige kontakt til elementet:

var c = document.getElementById("grafik");
var plot = c.getContext("2d");

At tegne på Canvas

Der er selvfølgelig først noget ved det, når man kan få noget ud på sit Canvas, og til dette formål er der en række forskellige metoder, som kan definere hvad det er man tegner, hvordan det ser ud og hvilke farver der fyldes i. Det er ikke meningen at dette skal være en komplet gennemgang af alle metoder, men et simpelt eksempel der laver en rød firkant kan være:

ctx.fillStyle="red";
ctx.fillRect(10,10,150,75);

Man kan finde meget mere på http://www.w3schools.com/tags/ref_canvas.asp hvor de forskellige metoder er listet, og inde på de enkelte metoder er de beskrevet, og der ligger eksempler man kan afprøve.

De fleste metoder knytter sig til rent grafiske elementer, hvor man kan arbejde med linjer, cirkler og andre grafiske elementer, og der er også knyttet sådan noget som gradienter i farverne til nogle af elementerne.

Tankegangen i Canvas

Selve tankegangen i Canvas kan godt drille lidt, fordi det man umiddelbart tænker er, at man tegner på Canvas.

Det er bare ikke tilfældet – man skaber et mønster i hukommelsen, og så er der funktioner som kan få disse mønstre til at træde frem på Canvas som f.x. stroke(), men også fill() vil aktuelt tegne noget.

Ideen bag dette er at man kan lave noget ret kompliceret, og så få det frem øjeblikkeligt, så man ikke vil opleve at noget bliver tegnet efterhånden som koden afvikles. Dette illustreres i udvidelsen af eksemplet senere.

Eksempel på anvendelse af Canvas

Denne anvendelse illustrerer specielt anvendelsen af at tegne linjer på canvas ved hjælp af to metoder:

ctx.moveTo(x,y);
ctx.lineTo(x,y);

Disse to metoder starter en linje der hvor moveTo() angiver det, og linjen går der hen hvor lineTo() angiver det, og man kan fortsætte videre ud fra dette punkt med endnu en lineTo(). Inden man anvender disse metoder starter man med en:

ctx.beginPath();

Denne metode gør canvas klar til at opsamle en tegning ved hjælp af linjer.

For at afslutte anvendes metoden:

ctx.stroke();

Det er denne metode der faktisk får vise det tegnede på Canvas.

Dele i graftegneren

Selve eksemplet går ud på at tegne to grafer i et koordinatsystem med følgende udseende:

Der er 3 funktioner i graftegningen:

slet();
tegnakser();
plotdata();

slet() gør ganske enkelt det at den sletter et rektangel på størrelse med hele canvas – det er i pricippet ikke nødvendigt, men vil fungere godt i næste version.

tegnakser() tegner en x og en y akse på canvas og sætter streger på dem for hver hele inddeling.

plotdata() tegner derefter de to funktioner ind på canvas, først en sinus-funktion med en amplitude på 1 og derefter en cosinus med en amplitude på 1,8.

Koden kan hentes som Canvas.html i denne ZIP-fil.

Udvidelse af eksemplet

For at illustrere at Canvas fungerer ret hurtigt, og er god til at opdatere grafiske elementer, så er der i den samme ZIP-fil en udvidet version Canvas2.html, hvor graferne bevæger sig, ved at en flyttet version af grafen optegnes 50 gange i sekundet.

Webcode
JavaScript	for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input	Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output	Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks	Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt	Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript	Date objektet - setTimeout - setInterval
PHP	Header - Include