it-swarm.com.de

Am besten erkennen Sie, dass HTML5 <Canvas> nicht unterstützt wird

In Situationen, in denen der Browser das HTML5-Tag <canvas> nicht unterstützt, handelt es sich standardmäßig um das Einbetten einiger Fallback-Inhalte wie:

<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, eine nicht unterstützte Leinwand zu erkennen, damit ich den Rest meiner Seite entsprechend präsentieren kann. Was würden Sie empfehlen?

136
brainjam

Dies ist die Technik, die in Modernizr und grundsätzlich in jeder anderen Bibliothek verwendet wird, die auf Leinwand arbeitet:

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

Da Ihre Frage zur Erkennung war, wenn nicht unterstützt wird, empfehle ich, sie so zu verwenden:

if (!isCanvasSupported()){ ...
211
Paul Irish

Es gibt zwei gängige Methoden zum Erkennen der Zeichenbereichsunterstützung in Browsern:

  1. Matts Vorschlag nach der Existenz von getContext zu suchen, das in ähnlicher Weise auch von der Modernizr-Bibliothek verwendet wird:

    _var canvasSupported = !!document.createElement("canvas").getContext;
    _
  2. Überprüfen der Existenz der Schnittstelle HTMLCanvasElement, wie in den Spezifikationen WebIDL und HTML 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 Anmerkungen ), 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 getContext -Ansatz ist deutlich langsamer in allen Browsern , da dabei ein HTML-Element erstellt wird. Dies ist nicht ideal, wenn Sie möglichst viel Leistung benötigen (z. B. in einer Bibliothek wie Modernizr).

Die Verwendung der ersten Methode bietet keine nennenswerten Vorteile. Beide Ansätze können gefälscht werden, was jedoch nicht zufällig passieren dürfte.

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ückgeben, für .getContext('2d') jedoch null. Deshalb prüft Modernizr auch das Ergebnis von .getContext('2d'). WebIDL & HTML bietet uns jedoch - wieder - eine bessere, schnellere Option:

_var canvas2DSupported = !!window.CanvasRenderingContext2D;
_

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

Sie müssen den getContext -Ansatz verwenden, um die WebGL-Unterstützung zu erkennen, obwohl der Browser unterstützt möglicherweise WebGLRenderingContext, getContext() gibt möglicherweise null zurück, wenn der Browser aufgrund von Treiberproblemen keine Schnittstelle zur GPU herstellen kann und keine Software implementiert ist. In diesem Fall können Sie beim Überprüfen der Schnittstelle zunächst 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.

Simple comparison table, click to run a test in your browser

103
Andy E

Normalerweise führe ich beim Erstellen meines Canvas-Objekts eine Prüfung auf getContext durch.

(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 die Ersteinrichtung fortsetzen und dem DOM hinzufügen. Dies ist ein einfaches Beispiel für Progressive Enhancement , das ich (persönlich) der Graceful Degradation vorziehen.

13
Matt

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

Zitat:

Wolltest du schon immer mal if-Anweisungen in Ihrem CSS für die Verfügbarkeit cooler Features wie Grenzradius? Nun, mit Modernizr Sie können genau das erreichen!

6
Frozenskys
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.");
}
5
Sheikh Ali

Möglicherweise gibt es hier ein Problem: Einige Clients unterstützen keine 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)
2
kennebec

Sie können mit canisuse.js script feststellen, ob Ihr Browser Canvas unterstützt oder nicht 

caniuse.canvas()
0
beka