HTML5 Canvas

Canvas-elementet bruges til at tegne grafik på websiden.

Hvad er Canvas?

HTML5's canvas-element bruger JavaScript til at tegne billeder på websiden.

Canvas er en rektangulær område, hvor du kan kontrollere hver pixel.

Canvas har flere tegneveje, rektangler, cirkler, tekster og mulighed for at tilføje billeder.

Opret Canvas-element

Tilføj canvas-element til HTML5-siden.

Definer elementets id, bredde og højde:

<canvas id="myCanvas" width="200" height="100"></canvas>

Tegning med JavaScript

canvas-elementet har ikke tegneevner. Alle tegnearbejder skal udføres internt i JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript bruger id til at finde canvas-elementet:

var c=document.getElementById("myCanvas");

Opret derefter context objektet:

var cxt=c.getContext("2d");

getContext("2d") objektet er et indbygget HTML5 objekt, der har mange metoder til at tegne stier, rektangler, cirkler, tekster og tilføje billeder.

De næste to linjer kode tegner en rød rektangel:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle metoden farver den rød, fillRect metoden specificerer form, placering og størrelse.

Forstå koordinater

Above fillRect metoden har parametre (0,0,150,75).

Det betyder: Tegn et 150x75 rektangel, der starter i øverste venstre hjørne (0,0).

Som vist i nedenstående billede bruges canvas' X- og Y-koordinater til at placere tegning på canvas.

Canvas instans: Forstå koordinater

Eksempel: Hold musen over rektanglen for at se koordinaterne

Flere Canvas Eksempler

Følgende er flere eksempler på tegning på canvas-elementet:

Eksempel - Linje

Tegn en linje ved at specificere start- og slutpunkt:

Canvas instans: Linjer

JavaScript kode:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

canvas element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Din browser understøtter ikke canvas elementet.
</canvas>

Prøv det selv

Eksempel - Cirkel

Tegn en cirkel ved at specificere størrelse, farve og placering:

Canvas instans: Cirkler

JavaScript kode:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

canvas element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Din browser understøtter ikke canvas elementet.
</canvas>

Prøv det selv

Eksempel - Gradient

Brug den farve, du har specificeret, til at tegne en gradient baggrund:

Canvas instans: Gradationer

JavaScript kode:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

canvas element:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Din browser understøtter ikke canvas elementet.
</canvas>

Prøv det selv

Eksempel - billede

Placer et billede på canvasen:

Canvas instans: Billeder

JavaScript kode:

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

canvas element:

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
Din browser understøtter ikke HTML5 canvas tagget.
</canvas>

Prøv det selv

HTML Canvas tutorial

For at lære mere om canvas, besøg vores HTML Canvas tutorial.

Relaterede sider

Referencemanual:HTML 5 <canvas> tag

Referencemanual:HTML DOM Canvas objekt