Атрибут height тега <canvas>
Описание
Атрибут height для элемента <canvas> определяет высоту холста в пикселях. В отличие от CSS-свойства height, этот атрибут устанавливает фактическое разрешение холста, а не только его визуальный размер.
<canvas id="myCanvas" width="300" height="150">
Ваш браузер не поддерживает canvas
</canvas>
| Аспект | Описание | Особенности |
|---|---|---|
| Значение | Целое число пикселей (без "px") | Только положительные числа |
| По умолчанию | 150 пикселей | Если атрибут не указан |
| Отличие от CSS | Определяет размер буфера рисования | CSS height только масштабирует |
Практические примеры:
1. Создание квадратного холста:
<canvas id="squareCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('squareCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 180, 180);
</script>
2. Динамическое изменение высоты:
<canvas id="resizableCanvas" width="300" height="100"></canvas>
<button onclick="resizeCanvas()">Увеличить высоту</button>
<script>
function resizeCanvas() {
const canvas = document.getElementById('resizableCanvas');
canvas.height = 200; // Увеличиваем высоту
const ctx = canvas.getContext('2d');
ctx.fillText("Новая высота: " + canvas.height, 10, 30);
}
</script>
Важные особенности:
- При изменении height содержимое холста очищается
- Рекомендуется устанавливать width и height одновременно
- Высокое разрешение увеличивает потребление памяти
- Для Retina-экранов может потребоваться удвоение размеров
Оптимальные практики:
<!-- Для Retina-экранов -->
<canvas id="hdCanvas"
width="600" height="300"
style="width: 300px; height: 150px">
</canvas>
<script>
// Настройка для HiDPI дисплеев
const canvas = document.getElementById('hdCanvas');
const ctx = canvas.getContext('2d');
ctx.scale(2, 2); // Масштабирование для четкости
</script>
Примечание: Всегда устанавливайте атрибуты width и height непосредственно в HTML или через свойства DOM, а не через CSS, чтобы избежать размытия и искажений графики.