Canvas API

<canvas>-elementet definerer et bitmapområde i en HTML-side.

Canvas API giver JavaScript mulighed for at tegne grafik på canvas.

Canvas API kan tegne former, linjer, kurver, rammer, tekst og billeder, samt farver, rotation, gennemsigtighed og andre pixeloperationer.

Tilføj Canvas til HTML

Du kan tilføje et canvas-element i hvilken som helst position på en HTML-side ved hjælp af <canvas>-tagget:

Eksempel

<canvas id="myCanvas" width="300" height="150"></canvas>

Prøv det selv

Sådan får du adgang til Canvas-elementet

Du kan bruge HTML DOM-metoden getElementById() til at få adgang til <canvas>-elementet:

const myCanvas = document.getElementById("myCanvas");

Hvis du vil tegne på tavlen, skal du oprette en 2D kontekstobjekt:

const ctx = myCanvas.getContext("2d");

Noter

HTML <canvas> elementet har ikke selv tegningsfunktioner.

Du skal bruge JavaScript til at tegne ethvert grafisk element.

getContext() metoden returnerer et objekt med tegningsværktøjer (metoder).

Tegn på tavlen

Efter at have oprettet 2D konteksten kan du tegne på tavlen.

Nedenstående fillRect() metode tegner en sort rektangel, hvis øvre venstre hjørne er placeret i position 20,20. Rektanglen er 150 pixel bred og 100 pixel høj:

Eksempel

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Prøv det selv

Brug farve

fillStyle egenskaben indstiller farven på tegningsobjektet:

Eksempel

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Prøv det selv

Du kan også bruge document.createElement() metoden til at oprette et nyt <canvas> element og tilføje dette element til den eksisterende HTML-side:

Eksempel

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Prøv det selv

Sti

En almindelig metode til at tegne på en tavle er:

1. Start stien - beginPath()
2. Flyt til en punkt - moveTo()
3. Tegn i stien - lineTo()
4. Tegn sti - stroke()

Eksempel

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Prøv det selv