HTML Canvas Læringsressourcer

HTML <canvas> element bruges til at tegne grafik på websider.

De ovenstående grafikker er skabt med <canvas>.

Det viser fire elementer: røde rektangler, gråtone rektangler, flerfarvede rektangler og flerfarvet tekst.

Hvad er HTML Canvas?

HTML <canvas>-elementet bruges til dynamisk at tegne grafik gennem script (normalt JavaScript).

<canvas>-elementet er kun en beholder for grafik. Du skal bruge script til at tegne de faktiske grafikker.

Canvas har flere metoder til at tegne stier, rammer, cirkler, tekst og tilføje billeder.

HTML Canvas kan tegne tekst

Canvas kan tegne farvet tekst og kan også have animationseffekter.

HTML Canvas kan tegne grafik

Canvas har kraftfulde evner til at grafisk præsentere data med grafik og diagrammer.

HTML Canvas kan animere

Canvas-objekter kan flyttes. Alt er muligt: fra enkle hoppende bollinger til komplekse animationer.

HTML Canvas kan interagere

Canvas kan reagere på JavaScript-hændelser.

Canvas kan reagere på enhver brugeroperation (knapklik, museklik, knapklik, fingerbevægelse).

HTML Canvas kan bruges til spil

Canvas' animationsmetoder giver mange muligheder for HTML-spilapplicationer.

Canvas Eksempel

I HTML ser <canvas>-elementet sådan ud:

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

<canvas>-elementet skal have et id-attribut, så JavaScript kan referere til det.

Width og height-attributter er også nødvendige for at definere canvas-størrelsen.

Tip: En HTML-side kan have flere <canvas>-elementer.

Som standard har <canvas>-elementet ingen kant eller indhold.

For at tilføje en kant, brug style-attributten:

Eksempel

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Prøv det selv

De næste kapitler vil forklare, hvordan du tegner på et canvas.

Se også：

Fuld Canvas reference manual på CodeW3C.com

Browserunderstøttelse

<canvas>-elementet er en del af HTML5-standarden (2014).

Alle moderne browsere understøtter <canvas>：