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

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

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

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

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

2. Проверка существования интерфейса 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() может вернуть 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.

& EMSP; & EMSP; & EMSP; & EMSP;

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);
}());

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

Answer 4

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

Цитата:

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

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

Здесь может быть ошибка - некоторые клиенты не поддерживают все методы 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)

Answer 7

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

caniuse.canvas()