HTML-<canvas> Tag

Definition und Verwendung

<canvas> Die Markierung wird in der Regel durch Skripte (meistens JavaScript) in Echtzeit gezeichnet.

<canvas> Die Markierung ist transparent und dient nur als Behälter für das Diagramm, um das tatsächliche Zeichnen des Diagramms müssen Skripte verwendet werden.

in Browsern, die JavaScript deaktiviert haben und das Element nicht unterstützen <canvas> im Browser, wird angezeigt <canvas> jeglicher Text im Element.

Hinweis

Lernen Sie in unserem HTML Canvas-Tutorial mehr über <canvas> weitere Informationen zum Element.

Für eine vollständige Referenz aller Eigenschaften und Methoden besuchen Sie bitte unsere HTML-Canvas-Referenzhandbuch.

Beispiel

Beispiel 1

Zeichnen Sie einen roten Rechteck in Echtzeit und zeigen Sie es im <canvas>-Element an:

<canvas id="myCanvas">
Ihr Browser unterstützt das canvas-Element nicht.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Probieren Sie es selbst aus

Beispiel 2

Ein weiteres <canvas>-Beispiel:

<canvas id="myCanvas">
Ihr Browser unterstützt das canvas-Element nicht.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Transparenz öffnen
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Probieren Sie es selbst aus

Eigenschaft

Eigenschaft Wert Beschreibung
height Pixelwert Definiert die Höhe des Bildschirms. Der Standardwert beträgt 150.
width Pixelwert Definiert die Breite des Bildschirms. Der Standardwert beträgt 300.

Globale Attribute

<canvas> Der Tag unterstützt auch Globale Attribute in HTML.

Event-Attribute

<canvas> Der Tag unterstützt auch Event-Attribute in HTML.

Standard-CSS-Einstellungen

Die meisten Browser verwenden folgende Standardwerte zur Anzeige <canvas> Element:

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

Probieren Sie es selbst aus

Geschichte von <canvas>

Dieser HTML-Element ist für clientseitige Vektor-Grafiken konzipiert. Es hat selbst kein Verhalten, zeigt aber einem Client-JavaScript eine Zeichnungs-API, damit Skripte alles Zeichnen, was sie auf einem Bildschirm zeichnen möchten, darstellen können.

Das <canvas>-Tag wurde von Apple in Safari 1.3 Webbrowser eingeführt. Der Grund für diese grundlegende Erweiterung von HTML liegt darin, dass die Zeichnungsfähigkeit von HTML in Safari auch von der Dashboard-Komponente des Mac OS X Desktops verwendet wird, und Apple wollte eine Möglichkeit haben, skriptierte Grafiken in Dashboard zu unterstützen.

Firefox 1.5 und Opera 9 folgten der Führung von Safari. Beide Browser unterstützen das <canvas>-Tag.

Wir können sogar den <canvas>-Tag in IE verwenden und ein kompatibles Canvas auf Basis der VML-Unterstützung von IE mit Open-Source-JavaScript-Code (initiiert von Google) erstellen. Siehe auch:http://excanvas.sourceforge.net/.

Die Standardisierung von <canvas> wird von einer informellen Vereinigung von Webbrowser-Herstellern vorangetrieben, und derzeit ist <canvas> bereits als offizieller Tag in dem HTML 5-Entwurf enthalten. Siehe auch:http://www.whatwg.org/specs/web-apps/current-work/

Unterschiede zwischen dem <canvas>-Tag und SVG sowie VML

Eine wichtige Unterschied zwischen dem <canvas>-Tag und SVG sowie VML ist, dass <canvas> einen auf JavaScript basierenden Zeichnungs-API hat, während SVG und VML eine XML-Dokument verwenden, um die Zeichnung zu beschreiben.

Diese beiden Methoden sind funktionell äquivalent und jede kann durch die andere simuliert werden. Sie sind auf den ersten Blick sehr unterschiedlich, aber jede hat ihre Stärken und Schwächen. Zum Beispiel ist die SVG-Zeichnung leicht zu bearbeiten, indem einfach Elemente aus ihrer Beschreibung entfernt werden.

Um Elemente aus einem <canvas>-Tag desselben Graphen zu entfernen, muss oft das Zeichnen gelöscht und neu gezeichnet werden.

Wie man mit dem <canvas>-Tag zeichnet

Die meisten Canvas-Zeichnungs-APIs sind nicht auf dem <canvas>-Element selbst definiert, sondern auf den durch den Canvas. getContext() Methodeauf einem 'Zeichnungsumgebung' Objekt.

Der Canvas API verwendet ebenfalls die Darstellungsmethode der Pfade. Allerdings wird der Pfad durch eine Reihe von Methodenaufrufen definiert, nicht als Zeichen- und Nummernzeichenkette beschrieben, wie z.B. durch Aufrufe von beginPath() und arc().

Nachdem ein Pfad definiert wurde, sind andere Methoden wie fill() alle Operationen auf diesem Pfad. Die verschiedenen Eigenschaften des Zeichenumgebungs, wie fillStyle, erläutern, wie diese Operationen verwendet werden.

Anmerkung:Ein sehr kompaktes Grund für den Canvas API ist, dass er keine Unterstützung für das Zeichnen von Text bietet. Um Text in ein <canvas>-Grafik hinzuzufügen, muss entweder selbst gezeichnet und mit einem Bitmap-Bild kombiniert werden, oder mit CSS-Positionierung über dem <canvas> ein HTML-Text überlagert werden.

Browserkompatibilität

Die in der Tabelle genannten Zahlen geben die erste Version des Browsers an, die diesen Element an vollständig unterstützt.

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