Der beste Weg, um festzustellen, dass HTML5 <canvas> nicht unterstützt wird

Die Standardmethode für Situationen, in denen der Browser das HTML5- <canvas>Tag nicht unterstützt, besteht darin, einige Fallback-Inhalte einzubetten, z.

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

Der Rest der Seite bleibt jedoch derselbe, was unangemessen oder irreführend sein kann. Ich möchte eine Möglichkeit erkennen, nicht unterstützte Zeichenflächen zu erkennen, damit ich den Rest meiner Seite entsprechend präsentieren kann. Was würden Sie empfehlen?

Dies ist die Technik, die in Modernizr und im Grunde jeder anderen Bibliothek verwendet wird, die Leinwandarbeit leistet:

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

Da Ihre Frage zur Erkennung diente, wenn sie nicht unterstützt wird, empfehle ich, sie folgendermaßen zu verwenden:

if (!isCanvasSupported()){ ...

Es gibt zwei beliebte Methoden zum Erkennen der Canvas-Unterstützung in Browsern:

1. Matts Vorschlag , die Existenz von zu überprüfen getContext, wird ebenfalls in ähnlicher Weise von der Modernizr-Bibliothek verwendet:

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

2. Überprüfen der Existenz der HTMLCanvasElementSchnittstelle, wie in den WebIDL- und HTML- Spezifikationen definiert. Dieser Ansatz wurde auch in einem Blogbeitrag des IE 9-Teams empfohlen .

   var canvasSupported = !!window.HTMLCanvasElement;

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

• Jeder bekannte Browser, der Canvas unterstützt - einschließlich IE 9 - implementiert diese Schnittstelle.
• Es ist prägnanter und sofort klar, was der Code tut.
• Der getContextAnsatz ist in allen Browsern erheblich langsamer , da ein HTML-Element erstellt wird. Dies ist nicht ideal, wenn Sie so viel Leistung wie möglich erzielen möchten (z. B. in einer Bibliothek wie Modernizr).

Die Verwendung der ersten Methode bietet keine nennenswerten Vorteile. Beide Ansätze können gefälscht werden, dies ist jedoch nicht zufällig.

Zusätzliche Bemerkungen

Möglicherweise muss noch überprüft werden, ob ein 2D-Kontext abgerufen werden kann. Berichten zufolge können einige mobile Browser für beide oben genannten Prüfungen true zurück, aber Rückkehr nullzu .getContext('2d'). Deshalb prüft Modernizr auch das Ergebnis von .getContext('2d'). WebIDL & HTML bietet uns jedoch erneut eine bessere und schnellere Option:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Beachten Sie, dass wir die Überprüfung des Canvas-Elements vollständig überspringen und direkt zur Überprüfung der Unterstützung für 2D-Rendering übergehen können. Die CanvasRenderingContext2DSchnittstelle ist auch Teil der HTML-Spezifikation.

Sie müssen den getContextAnsatz zum Erkennen der WebGL- Unterstützung verwenden, da der Browser, obwohl er die unterstützt WebGLRenderingContext, getContext()möglicherweise null zurückgibt, wenn der Browser aufgrund von Treiberproblemen keine Schnittstelle zur GPU herstellen kann und keine Softwareimplementierung vorliegt. In diesem Fall können Sie bei der ersten Überprüfung der Schnittstelle die Überprüfung überspringen 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
    }
}

Leistungsvergleich

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

Normalerweise überprüfe getContextich, wann ich mein Canvas-Objekt erstelle.

(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 dies unterstützt wird, können Sie das Canvas-Setup fortsetzen und dem DOM hinzufügen. Dies ist ein einfaches Beispiel für progressive Verbesserung , das ich (persönlich) Graceful Degradation vorziehe.

Warum nicht Modernizr ausprobieren ? Es ist eine JS-Bibliothek, die Erkennungsfunktionen bietet.

Zitat:

Wollten Sie schon immer if-Anweisungen in Ihrem CSS machen, um coole Funktionen wie den Randradius zu erhalten? Mit Modernizr können Sie genau das erreichen!

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

Möglicherweise liegt hier ein Problem vor - einige Clients unterstützen nicht alle Canvas-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)

Mit dem Skript canisuse.js können Sie feststellen, ob Ihr Browser Canvas unterstützt oder nicht

caniuse.canvas()

Wenn Sie den Kontext Ihrer Leinwand erhalten möchten, können Sie ihn genauso gut als Test verwenden:

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