web-dev-qa-db-ja.com

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

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

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

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

javascripthtml5canvasprogressive-enhancementgraceful-degradation
137
brainjam

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

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

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

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

通常、キャンバスオブジェクトを作成するときに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 の簡単な例で、私は（個人的に）グレースフルデグラデーションよりも好みます。

13
Matt

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

見積もり：

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

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

ここに落とし穴があるかもしれません-一部のクライアントはall canvasメソッドをサポートしていません。

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

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

caniuse.canvas()
0
beka