イナヅマTVログ

[JavaScript] CanvasやWebGLが使えるかチェックしたい

| 0件のコメント

Canvas, WebGLが使えるかをチェックしたい。
three.jsサンプルについてるDetector.jsのコードを調べてみた。

var CanvasDetector = {
    canCanvas: function () {
        return !!window.CanvasRenderingContext2D
    },
    canWebGL: function () {
        try {
            return !!window.WebGLRenderingContext && !!document.createElement( 'canvas' ).getContext( 'experimental-webgl' );
        } catch( e ) {
            return false;
        }
    }
};

Detector.jsを参考にFile APIとWorkerのチェックを外しました。

if ( !CanvasDetection.canCanvas() ) {
 
    console.log( "Canvasが使えないよ。" );
} else if ( !CanvasDetection.canWebGL() ) {
 
    console.log( "WebGLが使えないよ。" );
} else {
 
    console.log("使えるよ");
}

チェックする時はこんな感じ。

Canvasが使えるかどうかはgetContextで調べてた。

return !!document.createElement('canvas').getContext;

CanvasRenderingContext2Dでチェックできるのね、賢くなった。

CanvasRenderingContext2D
MDN: CanvasRenderingContext2D
MSDN: CanvasRenderingContext2D
w3c: CanvasRendaringContext2D

WebGLRenderingContext
MDN: WebGLRenderingContext

!!window.WebGLRenderingContextfalse だと Graphics card が WebGL に対応してない。
!!document.createElement( 'canvas' ).getContext( 'experimental-webgl' )false だとブラウザが WebGL に対応してない。

てことらしい。

コメントを残す

必須欄は * がついています