<canvas>: Das Grafik-Zeichenfläche Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Verwenden Sie das HTML <canvas> Element zusammen mit entweder der Canvas-Scripting-API oder der WebGL-API, um Grafiken und Animationen zu zeichnen.

Attribute

Die Attribute dieses Elements umfassen die globalen Attribute.

height

Die Höhe des Koordinatenraums in CSS-Pixeln. Standardmäßig 150.

moz-opaque

Informiert die Canvas darüber, ob Transluzenz eine Rolle spielt. Wenn die Canvas weiß, dass keine Transluzenz vorliegt, kann die Malleistung optimiert werden. Dies wird nur von Mozilla-basierten Browsern unterstützt; verwenden Sie stattdessen den standardisierten Aufruf canvas.getContext('2d', { alpha: false }).

width

Die Breite des Koordinatenraums in CSS-Pixeln. Standardmäßig 300.

Anwendungshinweise

Alternativer Inhalt

Sie sollten alternativen Inhalt innerhalb des <canvas> Blocks bereitstellen. Dieser Inhalt wird sowohl in älteren Browsern, die Canvas nicht unterstützen, als auch in Browsern mit deaktiviertem JavaScript gerendert.

Schließendes </canvas> Tag

Im Gegensatz zum <img> Element erfordert das <canvas> Element das Schließen des Tags (</canvas>).

Größenanpassung der Canvas mit CSS versus HTML

Die angezeigte Größe der Canvas kann mit CSS geändert werden, aber wenn Sie dies tun, wird das Bild während des Renderings skaliert, um die gestylte Größe anzupassen, was dazu führen kann, dass die endgültige Grafikverarbeitung verzerrt wird.

Es ist besser, die Dimensionen Ihrer Canvas durch Setzen der width und height Attribute direkt auf den <canvas> Elementen zu spezifizieren, entweder direkt im HTML oder mittels JavaScript.

Maximale Canvas-Größe

Die genaue maximale Größe eines <canvas> Elements hängt vom Browser und der Umgebung ab. Während in den meisten Fällen die maximalen Abmessungen 10.000 x 10.000 Pixel überschreiten, beschränken iOS-Geräte die Canvas-Größe auffällig auf nur 4.096 x 4.096 Pixel. Siehe Canvas-Größenlimits in verschiedenen Browsern und Geräten.

Hinweis: Das Überschreiten der maximalen Dimensionen oder Fläche macht die Canvas unbrauchbar — Zeichenbefehle werden nicht funktionieren.

Verwenden einer Offscreen-Canvas

Eine Canvas kann mit der OffscreenCanvas API gerendert werden, bei der Dokument und Canvas entkoppelt sind. Der Vorteil besteht darin, dass ein Worker-Thread die Canvas-Rendering übernehmen kann und der Haupt-Thread Ihrer Webanwendung nicht durch Canvas-Operationen blockiert wird. Durch die Parallelisierung der Arbeit bleiben andere UI-Elemente Ihrer Webanwendung auch dann reaktionsfähig, wenn Sie komplexe Grafiken auf einer Offscreen-Canvas ausführen. Weitere Informationen finden Sie in der OffscreenCanvas API-Dokumentation.

Barrierefreiheit

Alternativer Inhalt

Das <canvas> Element ist für sich genommen nur ein Bitmap und liefert keine Informationen über gezeichnete Objekte. Canvas-Inhalte werden nicht als semantisches HTML an Barrierefreiheitstools weitergegeben. Im Allgemeinen sollten Sie vermeiden, Canvas auf einer zugänglichen Website oder App zu verwenden. Die folgenden Leitfäden können helfen, es zugänglicher zu machen.

Beispiele

HTML

Dieses Code-Snippet fügt Ihrem HTML-Dokument ein Canvas-Element hinzu. Ein Fallback-Text wird bereitgestellt, falls ein Browser die Canvas nicht lesen oder rendern kann.

html
<canvas width="120" height="120">
  An alternative text describing what your canvas displays.
</canvas>

JavaScript

Anschließend rufen Sie im JavaScript-Code HTMLCanvasElement.getContext() auf, um einen Zeichenkontext zu erhalten und beginnen, auf die Canvas zu zeichnen:

js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Add a rectangle at (10, 10) with size 100x100 pixels
ctx.fillRect(10, 10, 100, 100);

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließender Inhalt, Phraseninhalt, eingebetteter Inhalt, greifbarer Inhalt.
Erlaubter Inhalt Transparent, aber ohne interaktive Inhalte als Nachkommen, außer für <a> Elemente, <button> Elemente, <input> Elemente, deren type Attribut checkbox, radio oder button ist.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phraseninhalt akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Beliebige
DOM-Schnittstelle [`HTMLCanvasElement`](/de/docs/Web/API/HTMLCanvasElement)

Spezifikationen

Specification
HTML
# the-canvas-element

Browser-Kompatibilität

Siehe auch