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

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

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

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

Ответ 1

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

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

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

if (!isCanvasSupported()){ ...

Ответ 2

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

Мэтт предлагает проверить существование getContext, также использованный подобным образом библиотекой Modernizr:
```
var canvasSupported = !!document.createElement("canvas").getContext;
```
Проверка существования интерфейса HTMLCanvasElement, как определено спецификациями WebIDL и HTML. Этот подход также был рекомендован в блоге команды IE 9.
```
var canvasSupported = !!window.HTMLCanvasElement;
```

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

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

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

Дополнительные заметки

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

var canvas2DSupported = !!window.CanvasRenderingContext2D;

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

Вы должны использовать подход getContext для обнаружения поддержки WebGL, потому что, даже если браузер может поддерживать WebGLRenderingContext, getContext() может возвращать ноль, если браузер не может взаимодействовать с графическим процессором из-за драйвера проблемы и нет реализации программного обеспечения. В этом случае проверка интерфейса сначала позволяет пропустить проверку для 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% ниже в Chromium 18.

& ЕПРС; & ЕПРС; & ЕПРС; & ЕПРС;

Ответ 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);
}());

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

Ответ 4

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

Цитата:

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

Ответ 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.");
}

Ответ 6

Здесь может быть получена: некоторые клиенты не поддерживают методы all canvas.

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)

Ответ 7

Вы можете использовать canisuse.js script, чтобы определить, поддерживает ли ваш браузер холст или нет

caniuse.canvas()

Ответ 8

Если вы хотите получить контекст вашего холста, вы можете использовать его в качестве теста:

var canvas = document.getElementById('canvas');
var context = (canvas.getContext?canvas.getContext('2d'):undefined);
if(!!context){
  /*some code goes here, and you can use 'context', it is already defined*/
}else{
  /*oof, no canvas support :(*/
}