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

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

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

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

Источник

7 ответов

Решение

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

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

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

if (!isCanvasSupported()){ ...
Источник

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

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

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

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 :(*/
}
Источник

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

caniuse.canvas()
Источник
Другие вопросы по тегам