Атрибут width тега <canvas>
Описание
Атрибут width для элемента <canvas> определяет ширину холста в пикселях. Этот атрибут задает физическое разрешение области рисования, в отличие от CSS-свойства width, которое только масштабирует отображение.
<canvas id="drawingCanvas" width="500" height="300">
Ваш браузер не поддерживает элемент canvas
</canvas>
| Аспект | Описание | Особенности |
|---|---|---|
| Значение по умолчанию | 300 пикселей | Если атрибут не указан |
| Формат | Целое число (без указания единиц) | Только положительные значения |
| Влияние на содержимое | При изменении очищает холст | Все графические операции нужно выполнять заново |
Ключевые отличия от CSS width:
<!-- Неправильно: только CSS -->
<canvas style="width: 500px; height: 300px"></canvas>
<!-- Правильно: HTML-атрибуты -->
<canvas width="500" height="300" style="width: 100%"></canvas>
Практические примеры:
1. Адаптивный canvas:
<canvas id="responsiveCanvas"></canvas>
<script>
function setupCanvas() {
const canvas = document.getElementById('responsiveCanvas');
canvas.width = window.innerWidth * 0.8;
canvas.height = 400;
const ctx = canvas.getContext('2d');
// Отрисовка содержимого...
}
window.addEventListener('resize', setupCanvas);
setupCanvas();
</script>
2. High-DPI canvas:
<canvas id="hdCanvas" width="800" height="400"
style="width: 400px; height: 200px">
</canvas>
<script>
const canvas = document.getElementById('hdCanvas');
const ctx = canvas.getContext('2d');
// Масштабирование для Retina-дисплеев
const dpr = window.devicePixelRatio || 1;
ctx.scale(dpr, dpr);
</script>
Рекомендации:
- Всегда устанавливайте атрибуты width/height в HTML
- Для адаптивных сайтов изменяйте размеры через JavaScript
- Учитывайте соотношение сторон при изменении размеров
- Для сложной графики используйте буферизацию
Примечание: Не используйте CSS для установки основных размеров canvas - это приведет к растягиванию/сжатию изображения и потере качества. Всегда работайте с native-размерами через HTML-атрибуты или свойства DOM.