基于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 <a href="http://khronos.org/webgl/wiki/getting_a_webgl_implementation" rel="external nofollow" rel="external nofollow"  style="color:#000">webgl</a>.<br />',
        'find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow"  style="color:#000">here</a>.'
      ].join('\n') : [
        'your browser does not seem to support <a href="http://khronos.org/webgl/wiki/getting_a_webgl_implementation" rel="external nofollow" rel="external nofollow"  style="color:#000">webgl</a>.<br/>',
        'find out how to get it <a href="http://get.webgl.org/" rel="external nofollow" rel="external nofollow"  style="color:#000">here</a>.'
      ].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的代码放入其中，即可由浏览器自己判断是否支持。如果支持就执行。不支持就不执行。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。