js 判斷支援webgl_基于js判斷浏覽器是否支援webGL

起因是我之前開發的網頁，用到了three.js制作了一個3d的旋轉球體效果。

在各種浏覽器上運作都沒問題，在IE上也做了相容代碼。

但是今天接電話，老闆說你這網頁在xp上不顯示啊。IE上好使。google浏覽器不好使。

于是開始解決問題，不禁陷入了沉思。what?網頁顯示難道還與作業系統有關？google竟然不好使？

于是搭建一個xp虛拟機。

于是下載下傳一個chorme。

驚奇的發現并不能安裝最新版本的chrome。

哦？一定是xp上安裝的低版本chrome而那時候的chrome還不支援webGL。這個坑啊。

于是機智的我打算擷取谷歌版本，低版本的話不執行那段js。于是如下代碼：

function getChromeVersion() {

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('\n') : [

'Your browser does not seem to support WebGL.

',

'Find out how to get it here.'

].join('\n');

}

return element;

},

addGetWebGLMessage: function(parameters) {

var parent, 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

本文位址: http://www.cppcns.com/wangluo/javascript/308566.html