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
interface.
Eigenschaften
Erbt Eigenschaften von seinem Elternelement, HTMLElement
.
HTMLCanvasElement.height
- Ein positiver
integer
, der dasheight
HTML-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
- Ein
Boolean
, der dasmoz-opaque
HTML-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
- Ein positiver
integer
, der daswidth
HTML-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
.
HTMLCanvasElement.captureStream()
- Gibt ein
CanvasCaptureMediaStream
zurück, dieses ist ein Echtzeit-Video der Oberfläche des canvas. HTMLCanvasElement.getContext()
- 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 einCanvasRenderingContext2D
Objekt zurück, während er mit"experimental-webgl"
oder"webgl"
einWebGLRenderingContext
Objekt 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
type
parameter (defaults topng
). The returned image is in a resolution of 96dpi. HTMLCanvasElement.toBlob()
- Creates a
Blob
object 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()
- Transfers control to an
OffscreenCanvas
object, either on the main thread or on a worker. HTMLCanvasElement.mozGetAsFile()
- Returns a
File
object representing the image contained in the canvas; this file is a memory-based file, with the specifiedname
. Iftype
is 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!
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() |
Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
mozGetAsFile() |
Nicht unterstützt | 4.0 (2) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
captureStream() |
Nicht unterstützt | 41 (41) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
transferControlToOffscreen() |
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() |
Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
mozGetAsFile() |
Nicht unterstützt | Nicht unterstützt | 4.0 (2) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
captureStream() |
Nicht unterstützt | Nicht unterstützt | 41.0 (41) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
transferControlToOffscreen() |
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>
.