HTML5 Canvas: ブラウザが Canvas_html5 チュートリアル スキルをサポートしているかどうかをテストする方法

この記事は、Steve Fulton & Jeff Fulton HTML5 Canvas、第 1 章「ブラウザが Canvas をサポートしているかどうかを確認するテスト」を翻訳したものです。

HTML ページ上の Canvas 要素への参照を取得した後、要素に「コンテキスト」が含まれているかどうかをテストする必要があります。 Canvas のコンテキストは、ブラウザによって描画用に定義された平面を指します。簡単に言うと、コンテキストが存在しない場合、Canvas は名前だけが存在します。ブラウザが Canvas をサポートしているかどうかをテストするには、いくつかの方法があります。最初の方法は、HTML ページの Canvas 要素の getContext メソッドが存在するかどうかを確認することです:

コードをコピー

コードは次のとおりです。

if (!theCanvas || !theCanvas.getContext) {
return;
}

実際には、上記はコードは 2 つのポイントをテストします。1 つは theCanvas が false かどうかをテストします (ID が存在しない場合、 document.getElementById() は false を返します)。2 つ目は getContext() 関数が存在するかどうかをテストします。

上記のコードでは、テストが失敗した場合、return ステートメントが実行され、プログラムが終了します。

もう 1 つの方法は、Canvas がサポートされているかどうかを判断するために特別に使用される関数を作成することです。この関数では、この判断を行うために Canvas 要素がリアルタイムで生成されます。この方法は非常に人気があります。Mark Pilgrim は、彼の HTML5 ソリューションでこのソリューションを説明していますについては、Web サイト http://diveintohtml5.org に記載されています:

コードをコピーします

コードは次のとおりです:

function CanvasSupport() {
return !!document.createElement('canvas').getContext;
}
function CanvasApp() {
if (!canvasSupport( )) {
return;
}
}

私たちのお気に入りの方法は、modernizr.js ライブラリ (http://www.modernizr.com にあります) を使用することです。 Modernizr は、さまざまな Web テクノロジーの互換性をテストするための、シンプルで使いやすい軽量 JavaScript ライブラリです。現在の Canvas がサポートされているかどうかをテストするために使用できる静的なブール メソッドを多数提供します。

modernizr を HTML ページに導入するのは非常に簡単です。http://www.modernizr.com からコードをダウンロードし、次の外部 js ファイルを HTML ページに含めます:

コードをコピーします

コードは次のとおりです:

> ;

Modernizr を使用して Canvas のサポートをテストします。上記の CanvasSupport 関数を変更するだけです:

コードをコピー

コードは次のとおりです。

function CanvasSupport() {
return Modernizr.canvas;
}

ブラウザーが Canvas をサポートしているかどうかを判断するには、Modernizr.js を使用することが最良の解決策であると考えています。