javascript - many - graceful degradation español

La mejor forma de detectar que HTML5<canvas> no es compatible

Question

La forma estándar de lidiar con situaciones en las que el navegador no es compatible con la etiqueta HTML5 <canvas> es incorporar algún contenido alternativo como:

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

Pero el resto de la página permanece igual, lo que puede ser inapropiado o engañoso. Me gustaría alguna forma de detectar el lienzo no compatible para que pueda presentar el resto de mi página en consecuencia. ¿Qué recomendarías?

Answer 1

¿Por qué no pruebas modernizr ? Es una biblioteca JS que proporciona capacidad de detección.

Citar:

¿Alguna vez ha querido hacer declaraciones if en su CSS para la disponibilidad de funciones geniales como border-radius? ¡Bien, con Modernizr puedes lograr eso!

Answer 2

Esta es la técnica utilizada en Modernizr y, básicamente, cualquier otra biblioteca que hace el trabajo de lienzo:

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

Como su pregunta era para detección cuando no es compatible, recomiendo usarla de esta manera:

if (!isCanvasSupported()){ ...

Answer 3

Hay dos métodos populares de detección de soporte de lienzo en los navegadores:

1. La sugerencia de Matt de verificar la existencia de getContext , también utilizado de manera similar por la biblioteca de Modernizr:

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

2. Comprobación de la existencia de la interfaz HTMLCanvasElement , tal como se define en las WebIDL y HTML . Este enfoque también fue recomendado en una publicación de blog del equipo de IE 9 .

   var canvasSupported = !!window.HTMLCanvasElement;

Mi recomendación es una variación de esta última (ver notas adicionales ), por varias razones:

• Cada navegador compatible con lienzos, incluido IE 9, implementa esta interfaz;
• Es más conciso e instantáneamente obvio lo que está haciendo el código;
• El enfoque getContext es significativamente más lento en todos los navegadores , ya que implica la creación de un elemento HTML. Esto no es ideal cuando necesita exprimir tanto rendimiento como sea posible (en una biblioteca como Modernizr, por ejemplo).

No hay beneficios notables al usar el primer método. Ambos enfoques pueden ser falsificados, pero es probable que esto no ocurra por accidente.

Notas adicionales

Todavía puede ser necesario verificar que se puede recuperar un contexto 2D. Según se informa, algunos navegadores móviles pueden devolver verdadero para ambos controles anteriores, pero devuelven null para .getContext(''2d'') . Esta es la razón por la cual Modernizr también verifica el resultado de .getContext(''2d'') . Sin embargo, WebIDL y HTML, nuevamente, nos brindan otra opción mejor y faster :

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Tenga en cuenta que podemos omitir la comprobación del elemento canvas por completo y pasar directamente a la comprobación del soporte de representación 2D. La interfaz CanvasRenderingContext2D también forma parte de la especificación HTML.

Debe usar el enfoque getContext para detectar el soporte de WebGL porque, aunque el navegador puede admitir el WebGLRenderingContext , getContext() puede devolver nulo si el navegador no puede interactuar con la GPU debido a problemas con el controlador y no hay implementación de software. En este caso, la comprobación de la interfaz primero le permite omitir la comprobación de 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
    }
}

Comparación de rendimiento

El rendimiento del método getContext es un 85-90% más lento en Firefox 11 y Opera 11 y aproximadamente un 55% más lento en Chromium 18.

Answer 4

Normalmente ejecuto un control de getContext cuando creo mi objeto de lienzo.

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

Si es compatible, puede continuar con la configuración del lienzo y agregarlo al DOM. Este es un ejemplo simple de mejora progresiva , que yo (personalmente) prefiero a la degradación agraciada.

Answer 5

Puede haber un problema aquí: algunos clientes no son compatibles con todos los métodos de lienzo.

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 6

Puede usar la canisuse.js comandos canisuse.js para detectar si su navegador admite lienzo o no

caniuse.canvas()

Answer 7

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