141

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

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

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

4

8 に答える 8

219

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

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

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

if (!isCanvasSupported()){ ...
于 2010-04-30T19:06:42.187 に答える
104

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

  1. getContextModernizrライブラリでも同様の方法で使用される、の存在を確認するというMattの提案：

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

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

    var canvasSupported = !!window.HTMLCanvasElement;

私の推奨は、いくつかの理由から、後者のバリエーションです（追記を参照）。

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

最初の方法を使用することに目立った利点はありません。どちらのアプローチもなりすましの可能性がありますが、これが偶然に発生する可能性はほとんどありません。

その他の注意事項

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

var canvas2DSupported = !!window.CanvasRenderingContext2D;

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

WebGLサポートを検出するためのアプローチを使用する必要があります。これは、ブラウザーがをサポートしている場合でも、ドライバーの問題が原因でブラウザーがGPUとインターフェイスできず、ソフトウェアが実装されていない場合、nullを返す可能性があるためです。この場合、最初にインターフェースをチェックすると、以下のチェックをスキップできます。getContextWebGLRenderingContextgetContext()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アプローチのパフォーマンスは、Firefox11とOpera11では85〜90％遅く、Chromium 18では約55％遅くなります。

    <a href="http://jsperf.com/htmlcanvaselement-vs-getcontext-checks" rel="nofollow noreferrer">簡単な比較表をクリックして、ブラウザでテストを実行します

于 2010-04-30T15:03:50.370 に答える
13

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に追加できます。これはプログレッシブエンハンスメントの簡単な例であり、私は（個人的に）グレースフルデグラデーションよりも好みます。

于 2010-04-30T15:01:59.797 に答える
6

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

見積もり：

border-radius のような優れた機能を利用できるようにするために、CSS で if ステートメントを実行したいと思ったことはありませんか? さて、Modernizr を使用すると、まさにそれを実現できます。

于 2010-04-30T15:10:36.613 に答える
5 
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.");
}
于 2011-11-10T18:36:59.077 に答える
1

一部のクライアントは、すべてのキャンバス メソッドをサポートしていません。

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)
于 2010-04-30T16:22:44.357 に答える
0

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

caniuse.canvas()
于 2016-06-16T06:13:59.753 に答える