Das Detector.js-Plug-in implementiert Kompatibilitätserkennungscode

Tatsächlich ist der Code des Detector.js-Plug-Ins sehr kurz, verfügt aber über alle Funktionen

(1) Bestimmen Sie die Canvas-Kompatibilität.

(2) Bestimmen Sie die Webgl-Kompatibilität.

(3) Fügen Sie der Seite Informationen zur Inkompatibilitätsaufforderung hinzu.

Diese drei Funktionen reichen zur Kompatibilitätserkennung aus.

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen darüber vor, wie Three.js das Detector.js-Plug-in zur Implementierung der Kompatibilitätserkennung verwendet. Der Artikel stellt es ausführlich anhand von Beispielcode vor, der eine gewisse Referenz darstellt Für jedermanns Studium oder Arbeit kommen Freunde in Not vorbei und werfen einen Blick darauf. Ich hoffe, es hilft allen.

Die Verwendung ist ebenfalls sehr einfach:

Führen Sie zunächst das Plug-in auf der Seite ein:

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

Fügen Sie dann ein Urteil in js hinzu:

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

hat die Kompatibilitätserkennung implementiert. Ist das nicht ganz einfach?

Hängen Sie unten den Detector.js-Plug-in-Code an:

/** 
 * @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; 
 
}

Verwandte Empfehlungen:

JS-Methode zur Lösung der Position:Sticky-Kompatibilität Problem

Eine Zusammenfassung einiger Kompatibilitäts- und fehleranfälliger Probleme in js

Eine spezifische Analyse der Kompatibilitätsleistung in JavaScript

Das obige ist der detaillierte Inhalt vonDas Detector.js-Plug-in implementiert Kompatibilitätserkennungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!