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

Руководство по HTML

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

Свойство width HTML canvas

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

HTML <canvas> тег

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

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

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　<canvas>　width　свойство использования-Основной учебник-в3кодбокс.ком</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

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

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

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

Атрибут width указывает ширину элемента <canvas> в пикселях.

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

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

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

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

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

Синтаксис

<canvas width="пиксели">

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

ЗначениеОписание
пикселиУкажите ширину canvas, используя атрибут width в пикселях (например, "100"). По умолчанию width составляет "300"

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

Удалите канвас, установив атрибуты width или height (используя JavaScript):

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　<canvas>　width　свойство использования-Основной учебник-в3кодбокс.ком</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> тег