Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

HTMLCanvasElement

Baseline Widely available *

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

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

Die HTMLCanvasElement Schnittstelle bietet Eigenschaften und Methoden zur Manipulation des Layouts und der Darstellung von <canvas>-Elementen. Die HTMLCanvasElement-Schnittstelle erbt außerdem die Eigenschaften und Methoden der HTMLElement-Schnittstelle.

EventTarget Node Element HTMLElement HTMLCanvasElement

Instanzeigenschaften

Übernimmt Eigenschaften von ihrem übergeordneten Element, HTMLElement.

HTMLCanvasElement.height

Das height HTML-Attribut des <canvas>-Elements ist eine nicht-negative integer, die die Anzahl der logischen Pixel (oder RGBA-Werte) widerspiegelt, die eine Spalte des Canvas hinuntergehen. Wenn das Attribut nicht angegeben ist oder auf einen ungültigen Wert, wie einen negativen, gesetzt ist, wird der Standardwert 150 verwendet. Wenn keine [separate] CSS-Höhe dem <canvas> zugewiesen wird, 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 eine nicht-negative integer, die die Anzahl der logischen Pixel (oder RGBA-Werte) widerspiegelt, die eine Zeile des Canvas überqueren. Wenn das Attribut nicht angegeben ist oder auf einen ungültigen Wert, wie einen negativen, gesetzt ist, wird der Standardwert 300 verwendet. Wenn keine [separate] CSS-Breite dem <canvas> zugewiesen wird, 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 lässt das Canvas wissen, ob Transparenz ein Faktor sein wird oder nicht. Wenn das Canvas weiß, dass keine Transparenz vorliegt, kann die Malleistung optimiert werden. Dies wird nur in Mozilla-basierten Browsern unterstützt; verwenden Sie stattdessen den standardisierten canvas.getContext('2d', { alpha: false }).

HTMLCanvasElement.mozPrintCallback Nicht standardisiert

Eine function, die anfänglich null ist. Webinhalt kann dies auf eine JavaScript-Funktion setzen, die aufgerufen wird, wenn das Canvas neu gezeichnet werden soll, während die Seite gedruckt wird. Wenn aufgerufen, wird der Callback mit einem "printState"-Objekt übergeben, das die MozCanvasPrintState-Schnittstelle implementiert. Der Callback kann den Kontext vom printState-Objekt zum Zeichnen erhalten und muss dann done() darauf aufrufen, wenn er fertig ist. Der Zweck von mozPrintCallback ist es, eine hochauflösende Wiedergabe des Canvas in der Auflösung des verwendeten Druckers zu erhalten. Siehe diesen Blogeintrag.

Instanzmethoden

Übernimmt Methoden von ihrem übergeordneten Element, HTMLElement.

HTMLCanvasElement.captureStream()

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

HTMLCanvasElement.getContext()

Gibt einen Zeichenkontext auf dem 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 durch den type-Parameter angegebenen Format enthält (Standard ist 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 Benutzeragents auf der Festplatte zwischengespeichert oder im Speicher gespeichert werden.

HTMLCanvasElement.transferControlToOffscreen()

Überträgt die Kontrolle auf ein OffscreenCanvas-Objekt, entweder im Hauptthread oder auf einem Worker.

Ereignisse

Übernimmt Ereignisse von ihrem übergeordneten Element, HTMLElement.

Diese Ereignisse können mit addEventListener() überwacht werden oder durch Zuweisen eines Ereignis-Listeners zur oneventname-Eigenschaft dieser Schnittstelle.

contextlost

Wird ausgelöst, wenn der Browser erkennt, 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 erkennt, dass der Zeichnungspuffer, der einem WebGLRenderingContext oder WebGL2RenderingContext-Objekt zugeordnet ist, verloren gegangen ist.

webglcontextrestored

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

Spezifikationen

Specification
HTML
# htmlcanvaselement

Browser-Kompatibilität

Siehe auch

  • HTML-Element, das diese Schnittstelle implementiert: <canvas>