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.
Instanzeigenschaften
Erbt Eigenschaften von seinem Elternteil, HTMLElement
.
HTMLCanvasElement.height
-
Das
height
HTML-Attribut des<canvas>
-Elements ist ein nicht-negativerInteger
, 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 Standardwert150
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-negativerInteger
, 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 Standardwert300
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 Aufrufcanvas.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 vonmozPrintCallback
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äßigpng
). 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
oderWebGL2RenderingContext
Kontext zu erstellen. webglcontextlost
-
Wird ausgelöst, wenn der Benutzeragent feststellt, dass der Zeichnungsbuffer, der mit einem
WebGLRenderingContext
oderWebGL2RenderingContext
Objekt verbunden ist, verloren gegangen ist. webglcontextrestored
-
Wird ausgelöst, wenn der Benutzeragent den Zeichnungsbuffer für ein
WebGLRenderingContext
oderWebGL2RenderingContext
Objekt wiederherstellt.
Spezifikationen
Specification |
---|
HTML # htmlcanvaselement |
Browser-Kompatibilität
Siehe auch
- HTML-Element, das dieses Interface implementiert:
<canvas>