htmlラーニング-ブラウザがCanvasをサポートしているかどうかを検出します

4329 ワード

html canvas

canvas検出
Canvasはhtml 5の新しい特性なので、すべてのブラウザでサポートされているわけではありません.互換性に遭遇した場合、個人用のブラウザによっては、一部のブラウザで問題が発生することを防止するため、ページをロードする際にブラウザーがCanvasをサポートしているかどうかを事前に判断する必要があります.
判断の仕方は実はたくさんあり、Javascript自体が判断できるし、開発フレームワークも判断のcanvasを提供する方法もたくさんあります.
htmlコード
まずhtmlコードにはcanvasのラベルが必要です.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Canvas</title>
    <script src="./js/jquery-2.1.1.js"></script> <!-- jquery  -->
    <script src="./js/modernizr.js"></script> <!--modernizr.js  -->
    <script src="./js/testcanvas.js"></script>
</head>
<body>
    <canvas id="canvasOne" width="500" height="300">    
    Your brower does not support HTML5 Canvas!
    </canvas>
</body>
</html>

Javascript自体で判断
htmlにcanvasのコードを追加し、id=canvasOneを持っています.jsファイルでは次のコードで判断できます.

var Cvs = document.getElementById("canvasOne");

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

これでいいです.canvasがサポートされていない場合、直接returnすると、次のjsファイルは実行されません.
もう1つの方法は、ブラウザがサポートされているかどうかを検出するために仮想スライドを作成することです.方法は次のとおりです.

function canvasSupport() {
    return !document.createElement('testcanvas').getContext;
}
function canvasApp() {
    if (!canvasSupport) {
        return;
    }
}

canvasApp関数を直接実行すればよいが,この方法はMark Pilgrimによって作成された.
modernizr.jsライブラリ判定
modernizrのWebサイトからコードをダウンロードし、外部のjsファイルをインポートできます.(私は上のHtmlコードでインポートしたコードに感謝しました)
サポートされているコードを検出します.

function canvasSupport() {
    return Modernizr.canvas;
}

方法は大体上の通りです.後でcanvasの勉強blogを書きます.

バッグツールCharlesの使用心得

ジオメトリのいくつかのコードを計算します...