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.

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

EventTarget Node Element HTMLElement HTMLCanvasElement

Instanz-Eigenschaften

Erbt Eigenschaften von ihrem Elternteil, HTMLElement.

HTMLCanvasElement.height

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

HTMLCanvasElement.width

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

HTMLCanvasElement.mozOpaque Nicht standardisiert Veraltet

Ein boolescher Wert, der das HTML-Attribut moz-opaque des <canvas>-Elements widerspiegelt. Es gibt der Canvas an, ob Transparenz ein Faktor sein wird oder nicht. Wenn die Canvas weiß, dass es keine Transparenz gibt, 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. Web-Inhalte können dies auf eine JavaScript-Funktion setzen, die aufgerufen wird, wenn die Canvas während des Druckens neu gezeichnet werden soll. Beim Aufruf wird dem Callback ein "printState"-Objekt übergeben, das die MozCanvasPrintState-Schnittstelle implementiert. Der Callback kann den Kontext aus dem printState-Objekt erhalten, auf den gezeichnet werden soll, und muss danach done() auf dem Objekt aufrufen, wenn er fertig ist. Der Zweck von mozPrintCallback ist es, eine höher aufgelöste Darstellung der Canvas mit der Auflösung des genutzten Druckers zu erhalten. Siehe diesen Blog-Beitrag.

Instanz-Methoden

Erbt Methoden von ihrem Elternteil, HTMLElement.

HTMLCanvasElement.captureStream()

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

HTMLCanvasElement.getContext()

Gibt einen Zeichenkontext auf der Canvas zurück oder null, wenn die Kontextkennung nicht unterstützt wird oder die Canvas bereits auf einen anderen Kontextmodus eingestellt wurde.

HTMLCanvasElement.toDataURL()

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

HTMLCanvasElement.toBlob()

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

HTMLCanvasElement.transferControlToOffscreen()

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

Ereignisse

Erbt Ereignisse von ihrem Elternteil, HTMLElement.

Diese Ereignisse können mit addEventListener() überwacht werden, oder indem ein Ereignis-Listener auf die oneventname-Eigenschaft dieser Schnittstelle zugewiesen wird.

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 Standard
# htmlcanvaselement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

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