HTML5

https://stackoverflow.com/questions/2745432

02-10-2019
|

質問

ブラウザが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つの一般的な方法があります。

マットの提案の存在をチェックする getContext, 、Modernizrライブラリによって同様の方法でも使用されています。
```
var canvasSupported = !!document.createElement("canvas").getContext;
```
の存在を確認します HTMLCanvasElement インターフェイス、で定義されています webidl と HTML 仕様。このアプローチも推奨されました IE 9チームのブログ投稿.
```
var canvasSupported = !!window.HTMLCanvasElement;
```

私の推奨は後者のバリエーションです（参照 その他の注意事項）、いくつかの理由で：

キャンバスをサポートするすべての既知のブラウザ - IE 9を含む - は、このインターフェイスを実装します。
それはより簡潔で、コードが何をしているのかを即座に明らかにします。
getContext アプローチはです 大幅に遅い すべてのブラウザにわたって, 、それはHTML要素の作成を伴うためです。これは、できるだけ多くのパフォーマンスを絞る必要がある場合（たとえばModernizrのようなライブラリで）理想的ではありません。

最初の方法を使用することに顕著な利点はありません。どちらのアプローチもスプーフィングできますが、これは偶然に起こりそうにありません。

その他の注意事項

2Dコンテキストを取得できることを確認する必要がある場合があります。伝えられるところによると、一部のモバイルブラウザは上記のチェックの両方でtrueを返すことができますが、戻ります null にとって .getContext('2d')。これが、Modernizrが結果をチェックする理由です .getContext('2d')。ただし、WebIDL＆HTML - 繰り返しますが、もう1つの方が良いでしょう。もっと早くオプション：

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

サポートされている場合は、Canvasセットアップを続行してDOMに追加できます。これは簡単な例ですプログレッシブエンハンスメント, 、私は（個人的に）優雅な劣化よりも好む。

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

引用：

Border-Radiusのようなクールな機能を利用できるように、CSSの学習をしたいと思ったことはありますか？さて、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()

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

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

その他の注意事項

パフォーマンスの比較

HTML5