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, tekst 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 gennem JavaScript

Canvas-elementet har ingen tegneevner i sig selv. 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 to nedenstående linjer kode tegner en rød rektangel:

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

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

Forstå koordinater

FillRect-metoden har parametrene (0,0,150,75).

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

Som vist nedenfor bruges canvas' X- og Y-koordinater til at定位 tegning på canvas.

Canvas instans: Forstå koordinater

Eksempel: Hold musen over rektanglen for at se koordinaterne

Flere Canvas Eksempler

Nogle flere eksempler på at tegne på canvas-elementet:

Eksempel - Linje

Tegner 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

Tegner 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: Farveovergange

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 undervisning

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

Relaterede sider

Referencelæsebog:HTML 5 <canvas> tag

Referencelæsebog:HTML DOM Canvas objekt