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.WebGLRenderingContext が false だと Graphics card が WebGL に対応してない。
!!document.createElement( 'canvas' ).getContext( 'experimental-webgl' ) が false だとブラウザが WebGL に対応してない。
てことらしい。