[Javascript] Der beste Weg, um zu erkennen, dass HTML5 <Canvas> nicht unterstützt wird


Answers

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

  1. Matts Vorschlag , auf die Existenz von getContext , wird von der Modernizr-Bibliothek in ähnlicher Weise verwendet:

    var canvasSupported = !!document.createElement("canvas").getContext;
    
  2. Überprüfen der Existenz der HTMLCanvasElement Schnittstelle, 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 eine Variation der letzteren (siehe Zusätzliche Hinweise ), und zwar aus mehreren Gründen:

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

Die Verwendung der ersten Methode hat keine spürbaren Vorteile. Beide Ansätze können gefälscht werden, aber dies wird nicht zufällig passieren.

Zusätzliche Bemerkungen

Es kann immer noch notwendig sein, zu überprüfen, ob ein 2D-Kontext abgerufen werden kann. Einige mobile Browser können für beide obigen Überprüfungen "true" zurückgeben, geben aber für .getContext('2d') null . Aus diesem Grund überprüft Modernizr auch das Ergebnis von .getContext('2d') . Aber WebIDL & HTML - wieder - gibt uns eine weitere bessere, faster Option:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Beachten Sie, dass wir die Überprüfung auf das Canvas-Element vollständig überspringen können und direkt zur 2D-Rendering-Unterstützung gehen. Die CanvasRenderingContext2D Schnittstelle ist ebenfalls Teil der HTML-Spezifikation.

Sie müssen den getContext Ansatz zum Erkennen der WebGL- Unterstützung verwenden, da getContext() möglicherweise den WebGLRenderingContext null WebGLRenderingContext , wenn der Browser aufgrund von Treiberproblemen keine Schnittstelle zur GPU herstellen kann und keine Softwareimplementierung vorhanden ist, obwohl der Browser den WebGLRenderingContext unterstützt. In diesem Fall können Sie beim ersten getContext nach der Schnittstelle die Überprüfung auf getContext überspringen:

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 getContext Ansatzes ist in Firefox 11 und Opera 11 um 85-90% und in Chrom 18 um 55% langsamer.

Question

Die Standardmethode, mit Situationen umzugehen, in denen der Browser das HTML5-Tag <canvas> nicht unterstützt, ist das Einbetten einiger Fallback-Inhalte wie:

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

Aber der Rest der Seite bleibt gleich, was unangemessen oder irreführend sein kann. Ich möchte, dass Canvas nicht unterstützt wird, damit ich den Rest meiner Seite entsprechend darstellen kann. Was würden Sie empfehlen?




Möglicherweise gibt es hier einen Fehler - 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)



Warum versuchst du nicht modernizr ? Es ist eine JS-Bibliothek, die Erkennungsfunktionen bietet.

Zitat:

Wolltest du schon immer in deinem CSS nach if-Anweisungen für die Verfügbarkeit von coolen Features wie border-radius suchen? Nun, mit Modernizr können Sie genau das erreichen!