HTMLCanvasElement
Das HTMLCanvasElement interface bietet Eigenschaften und Methoden zum Manipulieren des Layouts und der Darstellung des <canvas>-Elements. Das HTMLCanvasElement interface erbt außerdem Eigenschaften und Methoden des HTMLElement (en-US) interface.
Eigenschaften
Erbt Eigenschaften von seinem Elternelement, HTMLElement (en-US).
HTMLCanvasElement.height(en-US)- Ein positiver
integer, der dasheightHTML-Attribut des<canvas>Elements in CSS-Pixeln repräsentiert. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert 150 verwendet. HTMLCanvasElement.mozOpaque(en-US) Non-Standard- Ein
Boolean, der dasmoz-opaqueHTML-Attribut des<canvas>Elements repräsentiert. Es sagt dem canvas, ob auf Transparenz verzichtet werden soll. Fallstrue, kann das Zeichnen auf dem canvas beschleunigt werden. HTMLCanvasElement.width(en-US)- Ein positiver
integer, der daswidthHTML-Attribut des<canvas>Elements in CSS-Pixeln anzeigt. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert 300 verwendet.
Methoden
Erbt Eigenschaften von seinem Elternelement, HTMLElement (en-US).
HTMLCanvasElement.captureStream()(en-US) Experimental- Gibt ein
CanvasCaptureMediaStream(en-US) zurück, dieses ist ein Echtzeit-Video der Oberfläche des canvas. HTMLCanvasElement.getContext()(en-US)- Gibt einen context des canvas zurück oder
null, falls die context-ID nicht unterstützt wird. Ein context ermöglicht es, auf dem canvas zu zeichnen. Der Aufruf dieser Methode mit"2d"gibt einCanvasRenderingContext2DObjekt zurück, während er mit"experimental-webgl"oder"webgl"einWebGLRenderingContextObjekt zurückgibt. Dieser context ist nur bei Browsern möglich, die WebGL unterstützen. HTMLCanvasElement.toDataURL()- Returns a data-URL containing a representation of the image in the format specified by the
typeparameter (defaults topng). The returned image is in a resolution of 96dpi. HTMLCanvasElement.toBlob()(en-US)- Creates a
Blobobject representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. HTMLCanvasElement.transferControlToOffscreen()(en-US) Experimental- Transfers control to an
OffscreenCanvas(en-US) object, either on the main thread or on a worker. HTMLCanvasElement.mozGetAsFile()(en-US) Non-Standard Deprecated- Returns a
Fileobject representing the image contained in the canvas; this file is a memory-based file, with the specifiedname. Iftypeis not specified, the image type isimage/png.
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| Media Capture from DOM Elements Die Definition von 'HTMLCanvasElement' in dieser Spezifikation. |
Arbeitsentwurf | Adds the method captureStream(). |
| HTML Living Standard Die Definition von 'HTMLCanvasElement' in dieser Spezifikation. |
Lebender Standard | The method getContext() now returns a RenderingContext rather than an opaque object.The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added. |
| HTML 5.1 Die Definition von 'HTMLCanvasElement' in dieser Spezifikation. |
Empfehlung | |
| HTML5 Die Definition von 'HTMLCanvasElement' in dieser Spezifikation. |
Empfehlung | Initial definition. |
Browserkompatibilität
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format.
Diese Kompatibilitätstabelle liegt noch im alten Format vor,
denn die darin enthaltenen Daten wurden noch nicht konvertiert.
Finde heraus wie du helfen kannst! (en-US)
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support (2D context) |
4.0 | 3.6 (1.9.2) | 9.0 | 9.0 [1] | 3.1 |
toBlob() |
Nicht unterstützt (bug 67587) | 19 (19) [2] | ? | ? | Nicht unterstützt (bug 71270) |
probablySupportsContext(),setContext(),transferControlToProxy()
Experimental
|
Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
mozGetAsFile()
Non-Standard
Deprecated
|
Nicht unterstützt | 4.0 (2) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
captureStream()
Experimental
|
Nicht unterstützt | 41 (41) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
transferControlToOffscreen()
Experimental
|
Nicht unterstützt | 44 (44) [3] | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support (2D context) |
2.1 | (Ja) | (Ja) | ? | 10.0 [1] | 3.2 |
webgl context |
? | ? | (Ja) as experimental-webgl |
? | ? | ? |
toBlob() |
Nicht unterstützt (bug 67587) | Nicht unterstützt (bug 67587) | 18.0 (18) [2] | ? | ? | Nicht unterstützt (bug 71270) |
probablySupportsContext(),setContext(),transferControlToProxy()
Experimental
|
Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
mozGetAsFile()
Non-Standard
Deprecated
|
Nicht unterstützt | Nicht unterstützt | 4.0 (2) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
captureStream()
Experimental
|
Nicht unterstützt | Nicht unterstützt | 41.0 (41) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
transferControlToOffscreen()
Experimental
|
Nicht unterstützt | Nicht unterstützt | 44.0 (44) [3] | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
[1] Opera Mini 5.0 and later has partial support.
[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.
[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.
Siehe auch
- HTML element implementing this interface:
<canvas>.