Se kilde til 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:
<source lang="html4strict">
<canvas id="grafik" width="600" height="400">
Denne tekst vises hvis browseren ikke understøtter HTML5 Canvas
</canvas>
</source>
==Kontakt til Canvas==
For at kunne arbejde med canvas skal man have fat i elementet, og man skal skabe den rigtige kontakt til elementet:
<source lang="javascript">
var c = document.getElementById("grafik");
var plot = c.getContext("2d");
</source>
==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:
<source lang="javascript">
ctx.fillStyle="red";
ctx.fillRect(10,10,150,75);
</source>
Man kan finde meget mere på http://www.w3schools.com/tags/ref_canvas.asp <ref>[http://www.w3schools.com/tags/ref_canvas.asp w3schools side om Canvas i 2d objektet]</ref> 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:
<source lang="javascript">
ctx.moveTo(x,y);
ctx.lineTo(x,y);
</source>
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:
<source lang="javascript">
ctx.beginPath();
</source>
Denne metode gør canvas klar til at opsamle en tegning ved hjælp af linjer.

For at afslutte anvendes metoden:
<source lang="javascript">
ctx.stroke();
</source>
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:

[[Fil:canvas-graf.PNG]]

Der er 3 funktioner i graftegningen:
<source lang="javascript">
slet();
tegnakser();
plotdata();
</source>
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 [[media:canvas-graf.zip|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}}

==Referencer==
<references />

[[Kategori:Objekt]]
[[Kategori:Javascript output]]