Получить профессию в Skypro
Определение поддержки HTML5 <canvas> в браузере
Быстрый ответ
Для испытания браузера на уровень поддержки HTML5 <canvas>, можно будет обойтись следующим сегментом кода:
var isCanvasSupported = !!document.createElement('canvas').getContext;Значение true переменной isCanvasSupported будет означать, что <canvas> поддерживается, false – в обратном случае. Это простая проверка великодушия браузера, которая помогает строить план B для веб-приложения.
Охватываем больше особенностей
Проверка поддержки 2D-контекста
Вы можете попытаться обратиться к 2D-контексту, чтобы понять ещё больше об уважении браузером технологии:
var canvas = document.createElement('canvas');
var isCanvas2DSupported = !!(canvas.getContext && canvas.getContext('2d'));
Выявление особенностей WebGL
Если вам предстоит работать с 3D-графикой с помощью WebGL, оценить готовность браузера к этому можно вот так:
var isWebGLSupported = function() {
var canvas = document.createElement('canvas');
return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
};Меры, если <canvas> не входит в привычките браузера
Если <canvas> браузер упорно игнорирует:
- Измените линию повествования на веб-странице или живо доработайте её дизайн.
- Предложите статические аналоги, например, картинки.
- Подумайте над информированием пользователя о безвременной потере некоторых феерических вожможностей.
Практика прогрессивного совершенствования
Плавный переход на JavaScript
if (isCanvasSupported) {
var canvas = document.createElement('canvas');
// Определите размеры и стиль canvas
document.body.appendChild(canvas);
} else {
// Предложите аналоги или сообщите пользователю, не стоит просто исчезать!
}Условное форматирование стилей CSS
С использованием библиотеки Modernizr, или добавив класс к элементу <html>, можно настроить условное форматирование стилей:
.no-canvas .fallback {
display: block; // Покажите пользователю, что он теряет!
}Справляемся с дополнительными сложностями при обращении к контексту
Особенности мобильных браузеров
Может быть так, что некоторые мобильные браузеры, несмотря на внешнюю убедительность, из-за некоторых ограничений или настроек потерпят неудачу в попытке обращения к контексту. Интернет – это дикая местность, будьте бдительны!
Надежная обработка исключений
Для перехвата исключений при обращении к контексту применяйте try...catch:
try {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// Здесь начинается игра с инструментами Пикассо!
} catch (e) {
// Подумайте над заменой: предложите картинку, или дружескую хватку осведомлённости.
}Профилактика – ключ к лучшим практикам
Избегайте обмана альтернативным контентом
Гарантируйте, что альтернативный контент не вводит пользователя в заблуждение относительно того, что функционал молча работает в тени. Людей не стоит обманывать!
Будьте на страже от возможнопй симуляции
Методы HTMLCanvasElement и getContext могут быть модифицированы, поэтому необходимо быть осмотрительным и разбираться дважды.
Поставьте пользователя на пьедестал
Стройте свое веб-приложение таким образом, чтобы оно могло уверенно адаптироваться к новым вызовам, но при этом быть максимально доступным и удобным для пользователя. Пользовательский опыт – это суть всего, даже несмотря на то, что оборудование некоторых пользователей не знакомо с последними технологическими трендами.
Визуализация
Представьте себе элемент <canvas> как сеть для ловли бабочек. У некоторых браузеров эта "сеть" отсутствует:
🌐🦋🥅 = Браузер, поддерживающий `<canvas>`Если "сети" нет:
if (!document.createElement('canvas').getContext) {
// Бабочка проскользнула!
🌐❓🥅 = "Нет сети для бабочки. 🚫🦋"
}Проверяем и информируем:
| Испытание браузера | Результат |
| ----------------------------- | -------------------------------- |
| 🌐🦋🥅 (Поддержка `<canvas>`) | Ситуация под контролем: ✅ |
| 🌐❓🥅 (Отсутствие `<canvas>`) | Сообщение: "Требуется обновление!" 🚫 |Технологические «мостики» между браузерами
Предотвращение ложных «звёздных» результатов
Будьте начеку с особенными случаями мобильных браузеров, которые могут лукавить о поддержке <canvas>.
Эмуляция условий для испытаний
С помощью таких инструментов как Chrome DevTools, можно воссоздать ненормальные условия и испытать ваше запасное решение.
Делайте союзниками библиотеки по отлову способностей
Библиотеки типа Modernizr помогают более эффективно действовать в реалиях разных браузеров и оставляют место для творчества.
Полезные материалы
- Основы использования canvas: MDN
- Оптимальный способ определения поддержки HTML5
<canvas>: Stack Overflow - Modernizr: библиотека для выявления способностей
- Таблицы поддержки HTML5: caniuse.com
- Выявление способностей canvas: Dive Into HTML5
- Основы HTML5 Canvas: W3Schools
- Эмуляция мобильных устройств: Chrome DevTools