HTML <canvas> Tag

Definition og brug

<canvas> Etiketter tegnes normalt ved hjælp af script (ofte JavaScript) til at tegne grafik i realtid.

<canvas> Etiketten er gennemsigtige, det er kun en beholder for grafik, som skal bruges til at tegne grafik faktisk.

i browsere, der har deaktiveret JavaScript og ikke understøtter <canvas> browser, vil vise <canvas> Tekst inde i elementet.

Advarsel

Lær om HTML Canvas i vores <canvas> mere viden om elementet.

For at se alle egenskaber og metoder i fuld reference, besøg vores HTML Canvas Reference Manual.

Eksempel

Eksempel 1

Tegn en rød rektangel i realtid og vis den i <canvas>-elementet:

<canvas id="myCanvas">
Din browser understøtter ikke canvas-mærket.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Prøv det selv

Eksempel 2

Et andet <canvas>-eksempel:

<canvas id="myCanvas">
Din browser understøtter ikke canvas-mærket.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Åbn gennemsigtighed
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Prøv det selv

Egenskab

Egenskab Værdi Beskrivelse
height Pixelværdi Definerer højden på maleriet. Standardværdien er 150.
width Pixelværdi Definerer bredden på maleriet. Standardværdien er 300.

Globale egenskaber

<canvas> Taget understøtter også HTML's globale egenskaber.

Begivenhedsattributter

<canvas> Taget understøtter også HTML-egenskaber for begivenheder.

Standard CSS-indstillinger

De fleste browsere vil vise følgende standardværdier <canvas> Element:

canvas {
  height: 150px;
  width: 300px;
}

Prøv det selv

Historien om <canvas>

Denne HTML-element er designet til klientvægtede grafik. Det har selv ingen adfærd, men viser en tegnings API til klient JavaScript, så skript kan tegne det, de vil, på et maleri.

<canvas>-tagget blev introduceret af Apple i Safari 1.3 webbrowseren. Grundet for denne fundamentale udvidelse af HTML var, at tegningsevnerne i Safari også bruges af Mac OS X desktops Dashboard-komponent, og Apple ønskede en måde at støtte scriptede grafik i Dashboard på.

Firefox 1.5 og Opera 9 fulgte efter Safari. Begge browsere understøtter <canvas>-tagget.

Vi kan endda bruge <canvas>-tagget i IE, og bygge kompatibilitetscanvas baseret på IE's VML-støtte ved hjælp af open source JavaScript-kode (initieret af Google). Se også:http://excanvas.sourceforge.net/.

Forsøget på at standardisere <canvas> er blevet fremmet af en uformel association af webbrowserproducenter, og i øjeblikket er <canvas> blevet en officiel etiket i HTML 5-draften. Se også:http://www.whatwg.org/specs/web-apps/current-work/

Forskelle mellem <canvas>-tagget, SVG og VML

En vigtig forskel mellem <canvas>-tagget, SVG og VML er, at <canvas> har en baseret på JavaScript tegnings API, mens SVG og VML bruger en XML-dokument til at beskrive tegningen.

Disse to måder er funktionelt ens, og enhver kan simuleres med den anden. På overfladen ser de meget forskellige ud, men hver har styrker og svagheder. For eksempel er SVG-tegninger nemme at redigere, bare ved at fjerne elementer fra deres beskrivelse.

For at fjerne elementer fra samme figur i et <canvas>-tag, skal man ofte slette tegningen og tegne den igen.

Sådan bruges <canvas>-tagget til tegning

de fleste Canvas tegnings API'er er ikke defineret på selve <canvas> elementet, men på elementer, der bruger canvas. getContext() metodenfået en 'tegningsmiljø' objekt.

Canvas API også bruger en række metoder til at definere stier, ikke som en streng af bogstaver og tal, men ved at kalde metoder som beginPath() og arc().

Når en sti er defineret, er andre metoder som fill() alle operationer på denne sti. En række egenskaber i tegningsmiljøet, såsom fillStyle, beskriver, hvordan disse operationer bruges.

Bemærk:En af grunderne til, at Canvas API er meget kompakt, er, at den ikke tilbyder nogen støtte til teksttegning. For at tilføje tekst til en <canvas>-grafik skal man enten selv tegne den og derefter kombinere den med en bitmap-billede, eller bruge CSS-positionering oven på <canvas> til at overlejre HTML-tekst.

Browsertilgang

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter dette element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0