Tegne med Canvas

recursion · 06-12-2011 15:20:12

Med HTML5 sitt canvas element kan du vise fram grafikk og tegne med scripting. Selve elementet har ikke noe innhold, men er rett og slett en definisjon på et område du kan tegne i. Du må selv angi plassering, lengde og bredde.

Hvordan opprette canvas element
Canvas-elementet oppretter du slik. Husk å angi bredde og høyde. I tillegg må du angi en id dersom du skal referere til elementet.

<canvas id="mittCanvas" width="150" height="150"></canvas>

For å tegne i canvas-elementet bruker vi JavaScript. Før du kan begynne å tegne, må du lage en referanse til elementet med JavaScript

var mittCanvas = document.getElementById("mittCanvas");

For å tegne et element, må du lage en funksjon i JavaScript. Først må du som nevnt ovenfor opprette en referanse til elementet, dernest må du benytte getContext-metoden, i dette tilfellet 2d

Her er et eksempel på hvordan du tegner et grønt rektangel:

function tegn() { 
    var mittCanvas = document.getElementById("mittCanvas"); 
    var minContext = mittCanvas.getContext("2d"); 
    minContext.fillStyle = "green";
    minContext.fillRect (10, 10, 55, 50); 
}

fillStyle bruker du til å angi farge. Du kan også angi farge med rgb.

fillRect(t,v,b,h) angir koordinatene som skal tegne rektangelet.
t = startposisjon fra toppen (av canvaselementet)
v = startposisjon fra venstre
b = bredde
h = høyden

Fullstendig kode

<html>
<head>
<script type="application/javascript"> 
function tegn() { 
    var mittCanvas = document.getElementById("mittCanvas"); 
    var minContext = mittCanvas.getContext("2d"); 
    minContext.fillStyle = "green";
    minContext.fillRect (0, 0, 50, 50); 
} 

</script>
</head>
<body onLoad="tegn();">
<canvas id="mittCanvas" width="150" height="150"></canvas>
</body>
</html>

I eksemplet ser du fillRect(0,0,50,50)
Det betyr at startposisjonen er øverst til venstre i canvas-elementet, og lengde og bredde er 50.
fillStyle er satt til green, men du kan også angi en rgb-farge slik:

minContext.fillStyle = "rgb(0,128,0)"

Last edited by recursion (06-12-2011 15:41:48)

Forum for IT, data og webutvikling

#1 06-12-2011 15:20:12

Tegne med Canvas

Fullstendig kode

Quick post

Board footer