class WebGL {static isWebGLAvailable () {try {const canvas = document.createElement('canvas');return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));} catch (e) {return false;}}static isWebGL2Available () {try {const canvas = document.createElement('canvas');return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'));} catch (e) {return false;}}static isColorSpaceAvailable (colorSpace) {try {const canvas = document.createElement('canvas');const ctx = window.WebGL2RenderingContext && canvas.getContext('webgl2');ctx.drawingBufferColorSpace = colorSpace;return ctx.drawingBufferColorSpace === colorSpace; } catch (e) {return false;}}static getWebGLErrorMessage () {return this.getErrorMessage(1);}static getWebGL2ErrorMessage () {return this.getErrorMessage(2);}static getErrorMessage (version) {const names = {1: 'WebGL',2: 'WebGL 2'};const contexts = {1: window.WebGLRenderingContext,2: window.WebGL2RenderingContext};let message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';const element = document.createElement('div');element.id = 'webglmessage';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 (contexts[version]) {message = message.replace('$0', 'graphics card');} else {message = message.replace('$0', 'browser');}message = message.replace('$1', names[version]);element.innerHTML = message;return element;}}export default WebGL;
JS中使用
import WebGL from './WebGL.js';if (WebGL.isWebGLAvailable()) {console.log('支持WebGL')
} else {}