HTML5 <canvas>がサポートされていないことを検出する最良の方法

ブラウザがHTML5 <canvas>タグをサポートしない状況に対処する標準的な方法は、次のようなフォールバックコンテンツを埋め込むことです。

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

ただし、ページの残りの部分は同じままで、不適切または誤解を招く可能性があります。キャンバスの非サポートを検出して、残りのページを適切に表示できるようにしたいのですが。あなたは何をお勧めします？

これは、Modernizrで使用されている手法であり、基本的にはキャンバスで機能する他のすべてのライブラリです。

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

あなたの質問はサポートされていない場合の検出に関するものだったので、次のように使用することをお勧めします。

if (!isCanvasSupported()){ ...

ブラウザでのキャンバスのサポートを検出するには、2つの一般的な方法があります。

1. の存在をチェックするというマットの提案getContext。Modernizrライブラリでも同様に使用されます。

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

2. WebIDLおよびHTML仕様でHTMLCanvasElement定義されている、インターフェースの存在の確認。このアプローチは、IE 9チームのブログ投稿でも推奨されていました。

   var canvasSupported = !!window.HTMLCanvasElement;

私の推奨は、いくつかの理由により、後者のバリエーションです（「追加情報」を参照）。

• キャンバスをサポートするすべての既知のブラウザー（IE 9を含む）がこのインターフェースを実装しています。
• コードが何をしているかがより簡潔で即座にわかります。
• このgetContext方法では、HTML要素の作成が含まれるため、すべてのブラウザで速度が大幅に低下します。これは、（たとえば、Modernizrなどのライブラリで）可能な限り多くのパフォーマンスを絞る必要がある場合には理想的ではありません。

最初の方法を使用しても目立った利点はありません。どちらの方法も偽装される可能性がありますが、これは偶然に起こることはまずありません。

その他の注意事項

2Dコンテキストを取得できることを確認する必要がある場合があります。報道によると、一部のモバイルブラウザは、上記の両方のチェックのためにtrueを返しますが、返すことができるnullため.getContext('2d')。これが、Modernizrがの結果もチェックする理由です.getContext('2d')。ただし、WebIDLとHTMLは、再び、より優れた高速なオプションを提供します。

var canvas2DSupported = !!window.CanvasRenderingContext2D;

canvas要素のチェックを完全にスキップして、2Dレンダリングサポートのチェックに直接進むことができることに注意してください。CanvasRenderingContext2Dインターフェースはまた、HTML仕様の一部です。

あなたは必要があります使用しgetContextたアプローチのWebGL検出するためのブラウザがサポートしている場合でも、ためのサポートをWebGLRenderingContext、getContext()返すことがヌルのブラウザが原因ドライバの問題にGPUとのインタフェースすることができず、何のソフトウェア実装がない場合。この場合、最初にインターフェースを確認すると、次の確認をスキップできます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
    }
}

性能比較

このgetContextアプローチのパフォーマンスは、Firefox 11とOpera 11では85〜90％遅く、Chromium 18では約55％遅くなっています。

私は通常getContext、キャンバスオブジェクトを作成するときにチェックを実行します。

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

サポートされている場合は、キャンバスのセットアップを続行してDOMに追加できます。これはProgressive Enhancementの簡単な例であり、私は（個人的に）Graceful Degradationよりも優先しています。

modernizrを試してみませんか？これは、検出機能を提供するJSライブラリです。

見積もり：

border-radiusのようなクールな機能を利用できるようにするために、CSSでifステートメントを実行したいと思ったことはありませんか？まあ、Modernizrを使えば、まさにそれを達成できます！

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

ここで落とし穴があるかもしれません-一部のクライアントはすべてのキャンバスメソッドをサポートしていません。

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)

canisuse.jsスクリプトを使用して、ブラウザーがキャンバスをサポートしているかどうかを検出できます

caniuse.canvas()

キャンバスのコンテキストを取得する場合は、それをテストとして使用することもできます。

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