Le plug-in Detector.js implémente le code de détection de compatibilité

En fait, le code du plug-in Detector.js est très court, mais il a toutes les fonctions

(1) Déterminer la compatibilité du canevas.

(2) Déterminez la compatibilité Webgl.

(3) Ajoutez des informations d'invite d'incompatibilité à la page.

Ces trois fonctions suffisent pour la détection de compatibilité.

Cet article vous présente principalement les informations pertinentes sur la façon dont Three.js utilise le plug-in Detector.js pour implémenter la détection de compatibilité. L'article le présente en détail à travers un exemple de code, qui constituera une certaine référence. pour les études ou le travail de chacun. Value, amis dans le besoin venez jeter un œil ci-dessous. J'espère que cela aide tout le monde.

L'utilisation est également très simple :

Tout d'abord, introduisez le plug-in dans la page :

<script src="examples/js/Detector.js"></script>

Ensuite, ajoutez un jugement en js :

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

a implémenté la détection de compatibilité, n'est-ce pas très simple ? Allez le tester.

Ci-dessous, joignez le code du plug-in Detector.js :

/** 
 * @author alteredq / http://alteredqualia.com/ 
 * @author mr.doob / http://mrdoob.com/ 
 */ 
 
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( 'p' ); 
 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 ); 
 
 } 
 
}; 
 
// browserify support 
if ( typeof module === 'object' ) { 
 
 module.exports = Detector; 
 
}

Recommandations associées :

Méthode JS pour résoudre la compatibilité position:sticky problème

Un résumé de certains problèmes de compatibilité et sujets aux erreurs dans js

Une analyse spécifique des performances de compatibilité en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!