基于js判断浏览器是否支持webGL


Posted in Javascript onApril 18, 2020

起因是我之前开发的网页,用到了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的代码放入其中,即可由浏览器自己判断是否支持。如果支持就执行。不支持就不执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 #Javascript
javascript 内存模型实例详解
Apr 18 #Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 #Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 #Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 #Javascript
es6函数name属性功能与用法实例分析
Apr 18 #Javascript
es6数组includes()用法实例分析
Apr 18 #Javascript
You might like
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
JS中操作JSON总结
2020/12/06 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
python tkinter canvas使用实例
2019/11/04 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
卫校中专生的自我评价
2014/01/15 职场文书
《太阳》教学反思
2014/02/21 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
《司马光》教学反思
2016/02/22 职场文书