HTML DOM Canvas objekt

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

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 canvas-elementet på hvilken som helst placering i HTML-siden med <canvas>-tagget:

Eksempel

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

Prøv det selv

Sådan tilgår du Canvas-elementet

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

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

Hvis du vil tegne på canvas, skal du oprette en 2D kontekst:

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

Noter

HTML <canvas>-elementet har ingen tegningsfunktioner.

Du skal bruge JavaScript til at tegne alle grafikker.

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

Tegn på canvas

Efter at have oprettet en 2D kontekst kan du tegne på canvas.

Nedenstående fillRect() metode tegner en sort rektangel, hvis øvre venstre hjørne er placeret ved 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-eegenskaben 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() til at oprette et nyt <canvas>-element og tilføje det 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å et canvas er:

1. Start en sti - beginPath()
2. Flyt til en punkt - moveTo()
3. Tegn i stien - lineTo()
4. Tegn en 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