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.
Instanz-Eigenschaften
Erbt Eigenschaften von ihrem Elternteil, HTMLElement
.
HTMLCanvasElement.height
-
Das HTML-Attribut
height
des<canvas>
-Elements ist ein nicht-negativerinteger
, 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 Standardwert150
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-negativerinteger
, 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 Standardwert300
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 standardisiertencanvas.getContext('2d', { alpha: false })
. HTMLCanvasElement.mozPrintCallback
Nicht standardisiert-
Eine
function
, die anfänglichnull
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 vonmozPrintCallback
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äßigpng
). 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
- oderWebGL2RenderingContext
-Kontext zu erstellen. webglcontextlost
-
Wird ausgelöst, wenn der Benutzeragent erkennt, dass der Zeichnungspuffer, der einem
WebGLRenderingContext
- oderWebGL2RenderingContext
-Objekt zugeordnet ist, verloren gegangen ist. webglcontextrestored
-
Wird ausgelöst, wenn der Benutzeragent den Zeichnungspuffer für ein
WebGLRenderingContext
- oderWebGL2RenderingContext
-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>