HTML <canvas> tagg

Definition och användning

<canvas> Etiketter ritas vanligtvis i realtid med skript (vanligtvis JavaScript).

<canvas> Etiketter är genomskinliga, de är bara behållare för grafik och måste användas med skript för att faktiskt rita grafik.

i webbläsare där JavaScript är inaktiverat och som inte stöder <canvas> browsare kommer att visa <canvas> All text inom elementet.

Tips

Lär dig mer om HTML Canvas i vår <canvas> mer information om elementet.

För att se alla egenskaper och metoder fullständigt, besök vår HTML Canvas referens manual.

Exempel

Exempel 1

Rita en röd rektangel i realtid och visa den i <canvas>-elementet:

<canvas id="myCanvas">
Din webbläsare stöder inte canvas-tagg
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Prova själv

Exempel 2

Ett annat <canvas>-exempel:

<canvas id="myCanvas">
Din webbläsare stöder inte canvas-tagg
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Öppna transparens
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Prova själv

Egenskap

Egenskap Värde Beskrivning
height Pixlvärde Definierar höjden på canvas. Standardvärdet är 150.
width Pixlvärde Definierar bredden på canvas. Standardvärdet är 300.

Globala egenskaper

<canvas> Etiketten stöder också Globala egenskaper i HTML.

EvenSTANCEEGENSKAPER

<canvas> Etiketten stöder också EvenSTANCEEGENSKAPER i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att visa följande standardvärden <canvas> Element:

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

Prova själv

Historien om <canvas>

Denna HTML-element är designat för klientvektorgrafik. Det har inte något eget beteende, men visar en rit-API till klient JavaScript så att skript kan rita allt de vill på en canvas.

<canvas>-tagget introducerades av Apple i Safari 1.3 Webbläsare. Anledningen till denna grundläggande utökning av HTML är att ritningsförmågan i Safari också används av Mac OS X:s skrivbordskomponent Dashboard, och Apple vill ha ett sätt att stödja skriptade grafik i Dashboard.

Firefox 1.5 och Opera 9 följde efter Safari. Båda dessa webbläsare stöder <canvas>-tagget.

Vi kan till och med använda <canvas>-tagget i IE och bygga kompatibla canvas med öppen källkod JavaScript-kod (initierad av Google) baserat på IE:s VML-stöd. Se också:http://excanvas.sourceforge.net/.

Försöken att standardisera <canvas> drivs av en informell association av webbläsarleverantörer, och för närvarande har <canvas> blivit en officiell etikett i HTML 5-draften. Se också:http://www.whatwg.org/specs/web-apps/current-work/

Skillnader mellan <canvas>-tagget och SVG samt VML

En viktig skillnad mellan <canvas>-tagget och SVG samt VML är att <canvas> har ett baserat på JavaScript rit-API, medan SVG och VML använder en XML-dokument för att beskriva ritningen.

Dessa två sätt är funktionsmässigt lika, vilket som helst kan imiteras av det andra. På ytan verkar de mycket olika, men varje en har sina styrkor och svagheter. Till exempel är SVG-ritning enkelt att redigera, bara genom att ta bort element från dess beskrivning.

För att ta bort element från samma grafik i ett <canvas>-tagg, måste ofta ritningen raderas och omritas.

hur man använder <canvas>-tagget för att rita

de flesta Canvas-ritnings-API:erna är inte definierade på <canvas>-elementet självt, utan definieras genom att använda getContext() metodenfått en 'ritmiljö' objekt.

Canvas API också använder vägbeskrivningsmetoden. Men, vägen definieras av en serie metoder som anropas, inte beskrivs som en sträng av bokstäver och siffror, till exempel att anropa beginPath() och arc() metoder.

När en bana har definierats, är andra metoder som fill() alltid operativa på denna bana. various egenskaper i ritmiljön, som fillStyle, förklarar hur dessa operationer används.

Kommentar:En av orsakerna till att Canvas API är mycket kompakt är att det inte erbjuder något stöd för textritning. För att lägga till text till en <canvas>-bild måste man antingen själv rita den och sedan sammanfoga den med en bitmappsbild, eller använda CSS-positionering ovanpå <canvas> för att täcka HTML-text.

Webbläsarstöd

Tal i tabellen anger den första webbläsarversion som helt stöder detta element.

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