Получение ширины и высоты canvas в HTML5: JavaScript контекст

Быстрый ответ

Для того чтобы узнать размеры холста в HTML5, вам следует обратиться к свойствам width и height.

const canvas = document.getElementById('myCanvas'); // Вызываем холст.
const width = canvas.width; // Получаем ширину холста в пикселях.
const height = canvas.height; // Точно так же получаем высоту.

Такой способ позволяет получить точные размеры холста в пикселях и сохранить их в переменные width и height.

Погружаемся в детали

Адаптивные размеры при помощи getBoundingClientRect

Используйте метод getBoundingClientRect для определения размеров, изменяемых с помощью CSS-трансформаций:

const rect = canvas.getBoundingClientRect();
const dynamicWidth = rect.width; // Ширина с учётом CSS-правил.
const dynamicHeight = rect.height; // Высота, адаптированная под CSS.

Внимание: Подчеркнем, что эти размеры динамичны и зависят от CSS-стилей, применяемых к canvas.

Подробнее об этом расскажет наш спикер на видео

Контекст холста – ключ к манипуляциям

Для управления холстом вам потребуется контекст — ваш главный инструмент:

const context = canvas.getContext('2d'); // Получаем двухмерный контекст.

Он дает возможность работать с размерами холста непосредственно:

const contextWidth = context.canvas.width; // Определяем ширину через контекст.
const contextHeight = context.canvas.height; // Определяем высоту через контекст.

Упрощаем код с использованием деструктуризации

Для более чистого и лаконичного кода воспользуйтесь деструктуризацией:

const { width, height } = canvas; // Извлекаем ширину и высоту путем деструктуризации.

Возможные сложности

Стандартные размеры и их изменение

Стандартными размерами холста являются 300x150 пикселей. Чтобы минимизировать неожиданные ситуации, лучше задавайте размеры холста явно.

Внутренние против CSS размеров

Важно отличать фактические размеры холста, которые контролируются атрибутами, и визуальные размеры, задаваемые через CSS. Первые определяют параметры рисования, вторые влияют на масштаб.

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

Остерегайтесь потенциальных проблем с размерами холста, учитывая различия в поддержке браузерами. Например, в Safari scrollWidth и scrollHeight могут не работать так, как вы ожидаете.

Изменение размера окна

Холст должен корректно адаптироваться при изменении размера окна:

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

Используйте медиа-запросы и единицы измерения вьюпорта для обеспечения адаптивности холста.

Холст в интерактивных веб-приложениях

Холст полноценно проявляет себя в интерактивных веб-приложениях, где размеры часто должны динамически изменяться. Это особенно актуально для визуализации данных, цифрового искусства и работы с теневым DOM.

При создании анимаций или использовании requestAnimationFrame выбор правильных размеров холста обеспечивает высокую производительность и впечатляющие визуальные эффекты.

Визуализация

Пример определения размеров холста:

let myCanvas = document.getElementById('myCanvas');
let canvasWidth = myCanvas.width;
let canvasHeight = myCanvas.height;

Помните: HTML5-холст — это ваше поле для творчества. Свойства width и height определяют его размеры как окно в мир вашего искусства.

Полезные ресурсы

1. HTMLCanvasElement – Web APIs | MDN — MDN представляет собой источник знаний по API HTML5 холста.
2. The trick to viewport units on mobile | CSS-Tricks — Руководство по использованию единиц измерения вьюпорта для обеспечения адаптивности дизайна.
3. HTML5 Canvas Tutorial: An Introduction — SitePoint — Вводный курс по HTML5 Canvas с акцентом на управление размерами.
4. web.dev — Сайт, содержащий руководства по современным стандартам и методам в области веб-разработки.