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

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

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

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

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

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

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

if (!isCanvasSupported()){ ...

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

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-контекста. Как сообщается, некоторые мобильные браузеры могут возвращать истину для обеих вышеуказанных проверок, но возвращают nullдля .getContext('2d'). Вот почему Modernizr также проверяет результат .getContext('2d'). Однако WebIDL и HTML - опять же - дают нам еще один лучший и более быстрый вариант:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

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

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

Обычно я запускаю проверку, getContextкогда создаю свой объект холста.

(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. Это простой пример прогрессивного улучшения , которое я (лично) предпочитаю изящной деградации.

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

Цитата:

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

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.");
}

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

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)

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

caniuse.canvas()

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

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 :(*/
}