HTMLCanvasElement: width-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die HTMLCanvasElement.width-Eigenschaft ist ein positiver integer, der das width-HTML-Attribut des <canvas>-Elements widerspiegelt und in CSS-Pixeln interpretiert wird. Wenn das Attribut nicht angegeben ist oder auf einen ungültigen Wert, wie eine negative Zahl, gesetzt wird, wird der Standardwert 300 verwendet.
Das Setzen der width-Eigenschaft setzt den gesamten Rendering-Kontext auf seinen Standardzustand zurück. Dies umfasst das Löschen der Leinwand (Backing Buffer), das Zurücksetzen des aktuellen Pfades und das Zurücksetzen aller Eigenschaften wie fillStyle und globalCompositeOperation. Dieser Reset tritt bei allen Kontexttypen auf und tritt sogar ein, wenn width auf seinen aktuellen Wert gesetzt wird. Um den vorherigen Inhalt nach einer Änderungs des width wiederherzustellen, verwenden Sie CanvasRenderingContext2D.getImageData() und CanvasRenderingContext2D.putImageData(). Kontext-Eigenschaften müssen separat verfolgt und wiederhergestellt werden.
Dies ist eine von zwei Eigenschaften, die andere ist HTMLCanvasElement.height, die die Größe der Leinwand kontrollieren.
Wert
Eine Zahl.
Beispiele
Für dieses <canvas>-Element:
<canvas id="canvas" width="300" height="300"></canvas>
Sie können die Breite der Leinwand mit dem folgenden Code abfragen:
const canvas = document.getElementById("canvas");
console.log(canvas.width); // 300
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-canvas-height |
Browser-Kompatibilität
Siehe auch
HTMLCanvasElement: Schnittstelle zur Definition derHTMLCanvasElement.width-EigenschaftHTMLCanvasElement.height: Andere Eigenschaft zur Kontrolle der Größe der LeinwandHTMLEmbedElement.widthHTMLIFrameElement.widthHTMLImageElement.widthHTMLObjectElement.widthHTMLSourceElement.widthHTMLVideoElement.width