HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas width Eigenschaft

Die width-Eigenschaft spezifiziert die Breite des ＜canvas＞-Elements in Pixel, die width-Eigenschaft spezifiziert die Breite des ＜canvas＞-Elements in Pixel.

HTML <canvas> Tag

Online-Beispiel

Höhe und Breite sind200-pixeliges ＜canvas＞-Element:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML ＜canvas＞ width － Eigenschaft verwenden-Einführung3codebox.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Your browser does not support the HTML5　canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
</script>
</body>
</html>

Test it out ‹/›

Browser-Verträglichkeit

IEFirefoxOperaChromeSafari

Alle gängigen Browser unterstützen die width-Eigenschaft.

Beachtung: Internet Explorer 8 und frühere IE-Versionen unterstützen den ＜canvas＞-Tag nicht.

Definition und Verwendung

Die width-Eigenschaft spezifiziert die Breite des ＜canvas＞-Elements in Pixel.

Hinweis: Verwende die width-Eigenschaft, um die Breite des ＜canvas＞-Elements in Pixel zu spezifizieren.

Hinweis: Wenn die Höhe oder Breite des Canvas geändert wird, wird der Inhalt des Canvas geleert (siehe Beispiel unten auf der Seite).

Hinweis: Besuche unsere HTML Canvas Lerne mehr über ＜canvas＞ in den Tutorials.

HTML 4.01 mit HTML 5 Unterschiede

＜canvas＞ ist ein HTML5 enthält die neuen Tags.

Syntax

<canvas width="pixels">

Eigenschaftswert

Wert	Beschreibung
pixels	Bestimme die width-Eigenschaft des Canvas in Pixel (z.B. "100) Standardwert für width ist "300"

Mehr Beispiele

Das Leeren des Canvas durch die Einstellung der width- oder height-Eigenschaft (mit JavaScript):

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML ＜canvas＞ width － Eigenschaft verwenden-Einführung3codebox.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Your browser does not support the HTML5　canvas tag.
</canvas>
<br>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50,　50,　100,　100);
function clearCanvas() {
　　c.height =　300;
}
</script>
<button onclick="clearCanvas()">Clear canvas</button>
</body>
</html>

Test it out ‹/›

HTML <canvas> Tag

HTML: <template> Tag