js 判断支持webgl_js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。

在各种浏览器上运行都没问题，在IE上也做了兼容代码。

但是今天接电话，老板说你这网页在xp上不显示啊。IE上好使。google浏览器不好使。

于是开始解决问题，不禁陷入了沉思。what?网页显示难道还与操作系统有关？google竟然不好使？

于是搭建一个xp虚拟机。

于是下载一个chorme。

惊奇的发现并不能安装最新版本的chrome。

哦？一定是xp上安装的低版本chrome而那时候的chrome还不支持webGL。这个坑啊。

于是机智的我打算获取谷歌版本，低版本的话不执行那段js。于是如下代码：

functiongetChromeVersion() {var arr = navigator.userAgent.split(' ');var chromeVersion = '';for(var i=0;i < arr.length;i++){if(/chrome/i.test(arr[i]))

chromeVersion=arr[i]

}if(chromeVersion){return Number(chromeVersion.split('/')[1].split('.')[0]);

}else{return false;

}

}

这个可以返回谷歌浏览器的前两个号码。由此判断低版本，49为支持xp的最高版本。

本想美滋滋解决。又想起。我也不确定50以上全支持啊！！！

于是继续搞起，找一个让浏览器自己判断是否支持webGL的东西。

于是如下;

var Detector ={

canvas:!!window.CanvasRenderingContext2D,

webgl: (function() {try{var canvas = document.createElement('canvas');return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));

}catch(e) {return false;

}

})(),

workers:!!window.Worker,

fileapi: window.File&& window.FileReader && window.FileList &&window.Blob,

getWebGLErrorMessage:function() {var element = document.createElement('div');

element.id= 'webgl-error-message';

element.style.fontFamily= 'monospace';

element.style.fontSize= '13px';

element.style.fontWeight= 'normal';

element.style.textAlign= 'center';

element.style.background= '#fff';

element.style.color= '#000';

element.style.padding= '1.5em';

element.style.width= '400px';

element.style.margin= '5em auto 0';if(!this.webgl) {

element.innerHTML= window.WebGLRenderingContext ?['Your graphics card does not seem to support WebGL.
','Find out how to get it here.'].join('

') : ['Your browser does not seem to support WebGL.
','Find out how to get it here.'].join('

');

}returnelement;

},

addGetWebGLMessage:function(parameters) {varparent, id, element;

parameters= parameters ||{};

parent= parameters.parent !== undefined ?parameters.parent : document.body;

id= parameters.id !== undefined ? parameters.id : 'oldie';

element=Detector.getWebGLErrorMessage();

element.id=id;

parent.appendChild(element);

}

};if(typeof module === 'object') {

module.exports=Detector;

}

通过调用Detector.webgl，如果返回true为支持，false为不支持。

至此将three.js的代码放入其中，即可由浏览器自己判断是否支持。如果支持就执行。不支持就不执行。

完美~。

以上就是js判断浏览器是否支持webGL的全部内容。