HTML <canvas> Tag

Definitie en gebruik

<canvas> Labels worden meestal in real-time getekend met scripts (meestal JavaScript).

<canvas> Labels zijn transparant, ze zijn slechts containers voor grafieken en moeten met scripts worden gebruikt om grafieken daadwerkelijk te tekenen.

in browsers waarbij JavaScript is uitgeschakeld en die de <canvas> browser, zal <canvas> alle tekst binnen het element.

Tip

Leer over het canvas in onze HTML Canvas-tutorial: <canvas> meer te weten te komen over het element.

Voor een volledige lijst van alle eigenschappen en methoden, bezoek onze HTML Canvas Reference Manual.

Voorbeeld

Voorbeeld 1

Teken een rode rechthoek in real-time en toon hem in het <canvas>-element:

<canvas id="myCanvas">
Uw browser ondersteunt de canvas-tag niet.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Probeer het zelf uit

Voorbeeld 2

Een ander <canvas>-voorbeeld:

<canvas id="myCanvas">
Uw browser ondersteunt de canvas-tag niet.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Open transparantie
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Probeer het zelf uit

Eigenschap

Eigenschap Waarde Beschrijving
height Pixelwaarde Bepaalt de hoogte van het canvas. De standaardwaarde is 150.
width Pixelwaarde Bepaalt de breedte van het canvas. De standaardwaarde is 300.

Globale attributen

<canvas> De tag ondersteunt ook Globale attributen in HTML.

Evenementattributen

<canvas> De tag ondersteunt ook Evenementattributen in HTML.

Standaard CSS-instellingen

De meeste browsers tonen de volgende standaardwaarden weer <canvas> Element:

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

Probeer het zelf uit

De geschiedenis van <canvas>

Deze HTML-element is ontworpen voor客户端矢量图形。Het heeft zelf geen gedrag, maar toont een teken API aan客户端 JavaScript om ervoor te zorgen dat scripts alles kunnen tekenen wat ze willen op een canvas.

De <canvas> tag werd geïntroduceerd door Apple in de Safari 1.3 Webbrowser. De reden voor deze fundamentele uitbreiding van HTML is dat de tekenmogelijkheden van HTML in Safari ook worden gebruikt door het Dashboard-component van Mac OS X-bureaublad, en Apple wilde een manier hebben om gescriptte grafieken in Dashboard te ondersteunen.

Firefox 1.5 en Opera 9 volgden het voorbeeld van Safari. Beide browsers ondersteunen de <canvas> tag.

We kunnen zelfs de <canvas> tag gebruiken in IE, en een compatibele canvas bouwen op basis van de VML-ondersteuning van IE met open-source JavaScript-code (geinitieerd door Google). Zie ook:http://excanvas.sourceforge.net/.

De standaardisatie van <canvas> wordt voortgedreven door een informele协会 van Webbrowserfabrikanten, en <canvas> is nu een formele tag in de HTML 5 draft. Zie ook:http://www.whatwg.org/specs/web-apps/current-work/

Verschillen tussen de <canvas> tag en SVG en VML

Een belangrijke verschillen tussen de <canvas> tag en SVG en VML is dat <canvas> een op JavaScript gebaseerde teken API heeft, terwijl SVG en VML een XML-document gebruiken om tekeningen te beschrijven.

Deze twee manieren zijn functioneel equivalent; elk kan worden gesimuleerd met het andere. Op het eerste gezicht lijken ze heel verschillend, maar elk heeft sterke en zwakke punten. Bijvoorbeeld, SVG tekeningen zijn gemakkelijk te bewerken, door alleen de elementen uit hun beschrijving te verwijderen.

Om elementen te verwijderen van een <canvas> tag van dezelfde grafiek, moet vaak de tekening worden gewist en opnieuw getekend.

Hoe te tekenen met de <canvas> tag

De meeste Canvas teken API's zijn niet gedefinieerd op het <canvas> element zelf, maar op de getContext() methodeop een 'tekenomgeving' object.

De Canvas API gebruikt ook de weergave van paden. Maar, een pad wordt gedefinieerd door een reeks van methoden-aanroepen, in plaats van beschreven als een teken- en cijferstring, zoals het aanroepen van de methoden beginPath() en arc().

Once a path is defined, other methods such as fill() are operations on this path. Various properties of the drawing environment, such as fillStyle, explain how these operations are used.

Note:One of the very compact reasons for the Canvas API is that it provides no support for drawing text. To add text to a <canvas> graphic, you must either draw it yourself and then merge it with a bitmap image, or use CSS positioning above the <canvas> to overlay HTML text.

Browser support

The numbers in the table indicate the first browser version to fully support this element.

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