HTMLCanvasElement

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.

* Some parts of this feature may have varying levels of support.

Das HTMLCanvasElement Interface bietet Eigenschaften und Methoden zur Manipulation des Layouts und der Präsentation von <canvas>-Elementen. Das HTMLCanvasElement Interface erbt außerdem die Eigenschaften und Methoden des HTMLElement Interfaces.

EventTarget Node Element HTMLElement HTMLCanvasElement

Instanzeigenschaften

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLCanvasElement.height

Das height HTML-Attribut des <canvas>-Elements ist ein nicht-negativer Integer, der die Anzahl der logischen Pixel (oder RGBA-Werte) angibt, die in einer Spalte des Canvas nach unten verlaufen. Wenn das Attribut nicht angegeben ist oder auf einen ungültigen Wert wie negativ gesetzt ist, wird der Standardwert 150 verwendet. Wenn keine [separate] CSS-Höhe für den <canvas> zugewiesen ist, wird dieser Wert auch als Höhe des Canvas in der Längeneinheit CSS-Pixel verwendet.

HTMLCanvasElement.width

Das width HTML-Attribut des <canvas>-Elements ist ein nicht-negativer Integer, der die Anzahl der logischen Pixel (oder RGBA-Werte) angibt, die in einer Reihe des Canvas verlaufen. Wenn das Attribut nicht angegeben ist oder auf einen ungültigen Wert wie negativ gesetzt ist, wird der Standardwert 300 verwendet. Wenn keine [separate] CSS-Breite für den <canvas> zugewiesen ist, wird dieser Wert auch als Breite des Canvas in der Längeneinheit CSS-Pixel verwendet.

HTMLCanvasElement.mozOpaque Nicht standardisiert Veraltet

Ein boolescher Wert, der das moz-opaque HTML-Attribut des <canvas>-Elements widerspiegelt. Es informiert das Canvas darüber, ob Transluzenz ein Faktor sein wird oder nicht. Wenn bekannt ist, dass keine Transluzenz vorhanden ist, kann die Mal-Performance optimiert werden. Dies wird nur in Mozilla-basierten Browsern unterstützt; verwenden Sie stattdessen den standardisierten Aufruf canvas.getContext('2d', { alpha: false })).

HTMLCanvasElement.mozPrintCallback Nicht standardisiert

Eine Funktion, die zunächst auf null gesetzt ist. Web-Inhalte können dies auf eine JavaScript-Funktion setzen, die aufgerufen wird, wenn das Canvas beim Drucken der Seite neu gezeichnet werden soll. Wenn sie aufgerufen wird, wird der Rückruf mit einem "printState"-Objekt aufgerufen, das das MozCanvasPrintState Interface implementiert. Der Rückruf kann den Kontext von dem printState-Objekt abrufen und muss dann done() aufrufen, wenn es fertig ist. Der Zweck von mozPrintCallback besteht darin, eine Rendering von höherer Auflösung des Canvas in der Auflösung des verwendeten Druckers zu erzielen. Siehe diesen Blog-Post.

Instanzmethoden

Erbt Methoden von seinem Elternteil, HTMLElement.

HTMLCanvasElement.captureStream()

Gibt einen CanvasCaptureMediaStreamTrack zurück, der eine Echtzeit-Videoaufnahme der Oberfläche des Canvas ist.

HTMLCanvasElement.getContext()

Gibt einen Zeichenkontext des Canvas zurück oder null, wenn der Kontextbezeichner nicht unterstützt wird oder das Canvas bereits auf einen anderen Kontextmodus gesetzt wurde.

HTMLCanvasElement.toDataURL()

Gibt eine Daten-URL zurück, die eine Darstellung des Bildes im Format enthält, das durch den type Parameter angegeben ist (standardmäßig png). Das zurückgegebene Bild hat eine Auflösung von 96dpi.

HTMLCanvasElement.toBlob()

Erstellt ein Blob-Objekt, das das im Canvas enthaltene Bild darstellt; diese Datei kann nach Ermessen des Benutzeragenten auf der Festplatte zwischengespeichert oder im Arbeitsspeicher gespeichert werden.

HTMLCanvasElement.transferControlToOffscreen()

Überträgt die Kontrolle an ein OffscreenCanvas Objekt, entweder im Haupt-Thread oder in einem Worker.

Ereignisse

Erbt Ereignisse von seinem Elternteil, HTMLElement.

Diese Ereignisse können mit addEventListener() oder durch Zuweisen eines Ereignislisteners zur oneventname-Eigenschaft dieses Interfaces gehört werden.

contextlost

Wird ausgelöst, wenn der Browser feststellt, dass der CanvasRenderingContext2D-Kontext verloren gegangen ist.

contextrestored

Wird ausgelöst, wenn der Browser erfolgreich einen CanvasRenderingContext2D-Kontext wiederherstellt.

webglcontextcreationerror

Wird ausgelöst, wenn der Benutzeragent nicht in der Lage ist, einen WebGLRenderingContext oder WebGL2RenderingContext Kontext zu erstellen.

webglcontextlost

Wird ausgelöst, wenn der Benutzeragent feststellt, dass der Zeichnungsbuffer, der mit einem WebGLRenderingContext oder WebGL2RenderingContext Objekt verbunden ist, verloren gegangen ist.

webglcontextrestored

Wird ausgelöst, wenn der Benutzeragent den Zeichnungsbuffer für ein WebGLRenderingContext oder WebGL2RenderingContext Objekt wiederherstellt.

Spezifikationen

Specification
HTML
# htmlcanvaselement

Browser-Kompatibilität

Siehe auch

  • HTML-Element, das dieses Interface implementiert: <canvas>