Najlepszy sposób na wykrycie, że HTML5 <canvas> nie jest obsługiwany

Standardowym sposobem radzenia sobie z sytuacjami, w których przeglądarka nie obsługuje <canvas>tagu HTML5, jest osadzenie niektórych treści zastępczych, takich jak:

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

Ale reszta strony pozostaje taka sama, co może być nieodpowiednie lub wprowadzające w błąd. Chciałbym znaleźć sposób na wykrycie braku obsługi płótna, aby móc odpowiednio przedstawić resztę mojej strony. Co byś polecił?

Oto technika używana w Modernizr i praktycznie w każdej innej bibliotece, która wykonuje prace na płótnie:

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

Ponieważ pytanie było do wykrywania kiedy to nie obsługiwane, polecam go używać tak:

if (!isCanvasSupported()){ ...

Istnieją dwie popularne metody wykrywania obsługi kanwy w przeglądarkach:

1. Sugestia Matta, aby sprawdzić, czy istnieje getContext, również używana w podobny sposób przez bibliotekę Modernizr:

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

2. Sprawdzanie istnienia HTMLCanvasElementinterfejsu zgodnie ze specyfikacjami WebIDL i HTML . Takie podejście zostało również zalecane w poście na blogu zespołu IE 9 .

   var canvasSupported = !!window.HTMLCanvasElement;

Moja rekomendacja jest odmianą tego ostatniego (patrz Dodatkowe uwagi ) z kilku powodów:

• Każda znana przeglądarka obsługująca kanwę - w tym IE 9 - implementuje ten interfejs;
• Jest bardziej zwięzłe i od razu oczywiste, co robi kod;
• getContextPodejście jest znacznie wolniejsze we wszystkich przeglądarkach , ponieważ polega na tworzeniu elementu HTML. Nie jest to idealne rozwiązanie, gdy trzeba wycisnąć jak najwięcej wydajności (na przykład w bibliotece takiej jak Modernizr).

Nie ma zauważalnych korzyści z zastosowania pierwszej metody. Oba podejścia można sfałszować, ale nie jest to przypadkowe.

Dodatkowe uwagi

Wciąż może być konieczne sprawdzenie, czy można pobrać kontekst 2D. Podobno niektóre przeglądarki mobilne mogą zwracać wartość true dla obu powyższych sprawdzeń, ale zwracają w nullprzypadku .getContext('2d'). Dlatego Modernizr sprawdza również wynik .getContext('2d'). Jednak WebIDL i HTML - znowu - daje nam inną lepszą, szybszą opcję:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Zauważ, że możemy całkowicie pominąć sprawdzanie elementu canvas i przejść od razu do sprawdzania obsługi renderowania 2D. CanvasRenderingContext2DInterfejs jest również częścią specyfikacji HTML.

Państwo musi użyć getContextpodejście do wykrywania WebGL wsparcia, ponieważ, mimo że przeglądarka może wspierać WebGLRenderingContext, getContext()może zwrócić NULL jeśli przeglądarka nie jest w stanie współpracować z GPU z powodu problemów ze sterownikami i nie ma wdrożenie oprogramowania. W takim przypadku sprawdzenie interfejsu najpierw pozwala pominąć sprawdzanie 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
    }
}

Porównanie wydajności

Wydajność tego getContextpodejścia jest o 85-90% wolniejsza w przeglądarkach Firefox 11 i Opera 11 oraz o około 55% wolniejsza w Chromium 18.

Zwykle sprawdzam, getContextkiedy tworzę obiekt płótna.

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

Jeśli jest obsługiwany, możesz kontynuować konfigurację kanwy i dodać ją do DOM. To jest prosty przykład Progresywnego Wzmocnienia , który ja (osobiście) wolę od Graceful Degradation.

Dlaczego nie spróbować modernizr ? Jest to biblioteka JS, która zapewnia możliwość wykrywania.

Zacytować:

Czy kiedykolwiek chciałeś robić instrukcje if w swoim CSS, aby uzyskać dostęp do fajnych funkcji, takich jak border-radius? Cóż, z Modernizrem możesz to osiągnąć!

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

Może tu występować problem - niektórzy klienci nie obsługują wszystkich metod płótna.

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)

Możesz użyć skryptu canisuse.js, aby wykryć, czy Twoja przeglądarka obsługuje kanwę, czy nie

caniuse.canvas()

Jeśli chcesz uzyskać kontekst swojego płótna, równie dobrze możesz użyć go jako testu:

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