English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML справочник

Полный список HTML тегов

HTML canvas height свойство

Свойство height указывает высоту элемента <canvas> в пикселях, и каждый раз при изменении высоты или ширины поверхности содержимое поверхности будет очищаться.

HTML <canvas> тег

Онлайн пример

Элемент <canvas> с высотой и шириной 200 пикселей:

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　<canvas>　height　свойство использования-базовый учебник(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Ваш браузер не поддерживает тег HTML5 canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
Проверьте ‹/›

Совместимость с браузерами

IEFirefoxOperaChromeSafari

Все основные браузеры поддерживают свойство height.

Внимание: Internet Explorer 8 и более ранние версии IE не поддерживают тег <canvas>.

Определение и использование

Свойство height указывает высоту элемента <canvas> в пикселях.
Совет: Используйте свойство width для указания ширины элемента <canvas> в пикселях.

Совет: Каждый раз при изменении высоты или ширины поверхности содержимое поверхности будет очищаться (см. пример в нижней части страницы).

Совет: Пожалуйста, обратитесь к нашему HTML Canvas Узнайте больше о 　<canvas>в этом учебнике.

Различия между HTML 4.01 и HTML 5

<canvas> 　является новым тегом в HTML5.

Синтаксис

<canvas height="pixels">

Значение свойства

ЗначениеОписание
pixelsОпределите высоту canvas в пиках (например, "100px" или просто "100"). По умолчанию это "150".

Более примеров

Удалите поверхность с помощью установки свойств width или height (с использованием JavaScript):

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　<canvas>　width　свойство использования-базовый учебник(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Ваш браузер не поддерживает тег HTML5 canvas.
</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()">Очистить canvas</button>
</body>
</html>
Проверьте ‹/›

HTML <canvas> тег

HTML: <template> тег