Лучший способ обнаружить, что HTML5 не поддерживается

Question

Стандартный способ справиться с ситуациями, когда браузер не поддерживает HTML5 <canvas> Тег - это встроить некоторое сомнение, как:

<canvas>Your browser doesn't support "canvas".</canvas>

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

Answer 1

Это техника, используемая в Modernizr и в основном любую другую библиотеку, которая делает холст:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

Поскольку ваш вопрос был для обнаружения, когда это нет Поддерживается, я рекомендую использовать это так:

if (!isCanvasSupported()){ ...

Answer 2

Существует два популярных метода обнаружения поддержки холста в браузерах:

1. Предложение Мэтта проверки на существование getContext, также используется аналогичным образом по библиотеке Modernizr:

   var canvasSupported = !!document.createElement("canvas").getContext;
   

2. Проверка наличия HTMLCanvasElement Интерфейс, как определено Webidl. и HTML технические характеристики. Этот подход также был рекомендован в Сообщение в блоге от команды IE 9.

   var canvasSupported = !!window.HTMLCanvasElement;
   

Моя рекомендация - это вариация последнего (см. Дополнительные примечания), по нескольким причинам:

• Каждое известное браузер поддерживает холст - включая IE 9 - реализует этот интерфейс;
• Это более лаконично и мгновенно очевидно, что делает код;
• То getContext Подход есть значительно медленнее во всех браузерах, Поскольку он включает в себя создание HTML-элемента. Это не идеально, когда вам нужно сжать как можно больше эффективности (например, в библиотеке, как Modernizr, например).

Нет заметных преимуществ для использования первого метода. Оба подхода могут быть подделены, но это вряд ли произойдет случайно.

Дополнительные примечания

Еще все еще необходимо проверить, что 2D-контекст может быть получен. Как сообщается, некоторые мобильные браузеры могут вернуть TRUE как для проверки выше, но возврат null за .getContext('2d')Отказ Вот почему Moderizr также проверяет результат .getContext('2d')Отказ Тем не менее, Webidl & HTML - снова - дает нам другой лучше, Быстрее вариант:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Обратите внимание, что мы можем пропустить проверку элемента Canvas полностью и перейти прямо к проверке поддержки 2D-рендеринга. То CanvasRenderingContext2D Интерфейс также является частью спецификации HTML.

Ты должен использовать getContext подход для обнаружения WebGL. поддержка, потому что, хотя браузер может поддерживать WebGLRenderingContext, getContext() может вернуться нулевой Если браузер не может взаимодействовать с GPU из-за проблем водителя, и нет реализации программного обеспечения. В этом случае проверка на интерфейс сначала позволяет пропустить проверку на getContext:

var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}

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

Производительность getContext Подход составляет 85-90% медленнее в Firefox 11 и Opera 11 и около 55% медленнее в хроме 18.

    

Answer 3

Я обычно бегу проверяю getContext Когда я создаю свой объект Canvas.

(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());

Если он поддерживается, то вы можете продолжить настройку Canvas и добавить его в DOM. Это простой пример Прогрессивное улучшение, который я (лично) предпочитаю по изящной деградации.

Answer 4

Почему бы не попробовать Modernizr ? Это библиотека JS, которая обеспечивает возможности обнаружения.

Цитировать:

Вы когда-нибудь хотели сделать IF-утверждения в ваших CSS для наличия прохладных функций, таких как границы-радиус? Ну, с Moderizr вы можете сделать только это!

Answer 5

try {
    document.createElement("canvas").getContext("2d");
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");
}

Answer 6

Здесь могут быть чта - некоторые клиенты не поддерживают все методы холста.

var hascanvas= (function(){
    var dc= document.createElement('canvas');
    if(!dc.getContext) return 0;
    var c= dc.getContext('2d');
    return typeof c.fillText== 'function'? 2: 1;
})();

alert(hascanvas)

Answer 7

Ты можешь использовать Canisuse.js. Сценарий для обнаружения, если ваши браузеры поддерживают холст или нет

caniuse.canvas()