Der beste Weg, dass HTML5 zu erkennen, wird nicht unterstützt

Question

Die Standardmethode mit Situationen umgehen, wenn der Browser den HTML5 <canvas>-Tag nicht unterstützt ist, um etwas Ersatzinhalt einbetten wie:

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

Aber der Rest der Seite bleibt das gleiche, die unpassend ist oder irreführend. Ich möchte einen Weg Leinwand Nicht-Unterstützung des Erfassens, so dass ich den Rest meiner Seite entsprechend präsentieren. Was würden Sie empfehlen?

Answer 1

Dies ist die Technik in Modernizr verwendet und im Grunde jede andere Bibliothek, die Leinwand funktionierts:

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

Da Ihre Frage zum Nachweis war, wenn es nicht unterstützt, empfehle ich mag es so:

if (!isCanvasSupported()){ ...

Answer 2

Es gibt zwei populäre Methoden zum Nachweis Leinwand Unterstützung in Browser:

1. Matt Vorschlag für die Existenz von getContext zu prüfen, auch in ähnlicher Weise von der Modernizr Bibliothek verwendet :

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

2. Überprüfen der Existenz des HTMLCanvasElement Schnittstelle, wie definiert durch die WebIDL und HTML Spezifikationen. Dieser Ansatz wurde auch in eine Blog-Post von dem IE 9 Team .

   var canvasSupported = !!window.HTMLCanvasElement;
   

Meine Empfehlung ist, eine Variation des letzteren (siehe Zusätzliche Hinweise ), aus mehreren Gründen:

• Jeder bekannte Browser unterstützt Leinwand - einschließlich IE 9 - implementiert diese Schnittstelle;
• Es ist prägnanter und sofort klar, was der Code tut;
• Die getContext Ansatz ist deutlich langsamer in allen Browsern , weil es ein HTML-Element umfasst das Erstellen. Das ist nicht ideal, wenn Sie so viel Leistung wie möglich drücken müssen (in einer Bibliothek wie Modernizr, zum Beispiel).

Es gibt keine merklichen Vorteile die erste Methode zu verwenden. Beide Ansätze gefälscht werden können, aber dies wahrscheinlich nicht zufällig geschehen.

Zusätzliche Hinweise

Es kann noch erforderlich sein, um zu überprüfen, dass ein 2D-Kontext abgerufen werden kann. Berichten zufolge können einige mobile Browser für beide oben genannten Prüfungen wahr zurück, aber null für .getContext('2d') zurückzukehren. Aus diesem Grunde Modernizr auch das Ergebnis der .getContext('2d') prüft. Allerdings WebIDL & HTML - wieder - gibt uns eine andere besser, schneller Option:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Beachten Sie, dass wir für das Canvas-Element überspringen Überprüfung vollständig und gehen gerade für 2D-Rendering-Unterstützung zu überprüfen. Die CanvasRenderingContext2D Schnittstelle Teil der HTML-Spezifikation ist auch.

Sie muss verwenden, um die getContext Ansatz zum Erfassen WebGL Unterstützung, weil, auch wenn der Browser die WebGLRenderingContext unterstützen kann, getContext() zurückkehren null , wenn der Browser nicht in der Lage mit dem GPU Problemen aufgrund Treiber-Schnittstelle und es gibt keine Software-Implementierung. In diesem Fall wird für die Schnittstelle Überprüfung ermöglicht zunächst Sie getContext überspringen Überprüfung:

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
    }
}

Performance-Vergleich

Die Leistung des getContext Ansatzes ist 85-90% langsamer in Firefox 11 und Opera 11 und etwa 55% langsamer in Chromium 18.

läuft

Answer 3

ich in der Regel einen Scheck für getContext laufen, wenn ich mein Leinwand-Objekt erstellen.

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

Wenn es unterstützt wird, dann können Sie die Leinwand Setup fortsetzen und in den DOM hinzuzufügen. Dies ist ein einfaches Beispiel für Progressive Enhancement , die ich (persönlich) Graceful Degradation bevorzugt über.

Answer 4

Warum nicht versuchen, modernizr ? Es ist eine JS-Bibliothek, die Erkennungsfähigkeit bereitstellt.

Zitat:

Haben Sie jemals tun wollen if-Anweisungen in Ihrem CSS für die Verfügbarkeit von coolen Features wie border-radius? Nun, mit Modernizr Sie können einfach erreichen, dass!

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

Es kann eine Gotcha sein hier- einige Kunden nicht unterstützen alle Leinwand Methoden.

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

Sie können mit canisuse.js Skript, wenn Ihr Browser unterstützt Leinwand erkennen oder nicht

caniuse.canvas()