HTML Referenzhandbuch

Vollständiges HTML-Tag-Verzeichnis

HTML canvas height Eigenschaft

Die height-Eigenschaft spezifiziert die Höhe des ＜canvas＞-Elements in Pixel. Bei jeder Neukonfiguration der Höhe oder Breite des Canvas wird der Inhalt des Canvas geleert.

HTML <canvas> Tag

Online-Beispiel

Ein Element mit einer Höhe und Breite von200-Pixel-Canvas-Element:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML ＜canvas＞ ＜height＞ Eigenschaft verwenden-Grund教程(oldtoolbag.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 ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

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

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

Definition und Verwendung

Die height-Eigenschaft spezifiziert die Höhe des ＜canvas＞-Elements in Pixel.
Hinweis: Verwende die width-Eigenschaft, um die Breite des ＜canvas＞-Elements in Pixel zu spezifizieren.

Hinweis: Bei jeder Neukonfiguration der Höhe oder Breite des Canvas wird der Inhalt des Canvas geleert (siehe Beispiel unten auf der Seite).

Hinweis: Bitte besuche unsere HTML Canvas Lerne mehr über ＜canvas＞ im HTML-Tutorial.

HTML 4.01 mit HTML 5 unterschiede

<canvas> ist ein HTML5 enthält den neuen Tag.

Syntax

<canvas height="pixels">

Eigenschaftswert

Wert	Beschreibung
pixels	Definiert die Höhe des Canvas in Pixel (z.B. "100px" oder einfach "100"）。Standard ist "150"。

Mehr Beispiele

Durch Festlegen der width- oder height-Eigenschaft (mit JavaScript) das Canvas leeren:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML ＜canvas＞ ＜width＞ Eigenschaft verwenden-Grund教程(oldtoolbag.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>/button>
</body>
</html>

Test it out ‹/›

HTML <canvas> Tag

HTML: <template> Tag