检测WebGL - Web API 接口参考

了解更多并加入MDN Web Docs 社区。

检测WebGL. WebGL特性检测. SkiptomaincontentSkiptosearchSkiptoselectlanguageWeb开发技术WebAPI接口参考WebGLWebGL的例子检测WebGLArticleActions中文(简体)此页面由社区从英文翻译而来。

了解更多并加入MDNWebDocs社区。

检测WebGLWebGL特性检测 «上一页 下一页» 这个例子演示了如何通过渲染上下文来检测WebGL，并将结果报告给用户。

在第一个例子中，我们将检查浏览器是否支持WebGL。

为此，我们将尝试从canvas元素获取WebGL渲染的上下文。

WebGL渲染的上下文是一个接口，通过它你可以设置和查询绘图器的状态，发送数据到WebGL，执行绘制命令。

在单个上下文接口中保存绘图器的状态并不是WebGL独有的。

这在其他绘图技术里也是存在的API,比如2D渲染上下文的canvas。

然而，您可以调整的属性和变量对于每个API来说都是不同的。

[HerewouldgotheresultofWebGLfeaturedetection]

PressheretodetectWebGLRenderingContext body{ text-align:center; } button{ display:block; font-size:inherit; margin:auto; padding:0.6em; } //Runeverythinginsidewindowloadeventhandler,tomakesure //DOMisfullyloadedandstyledbeforetryingtomanipulateit. window.addEventListener("load",function(){ varparagraph=document.querySelector("p"), button=document.querySelector("button"); //Addingclickeventhandlertobutton. button.addEventListener("click",detectWebGLContext,false); functiondetectWebGLContext(){ //Createcanvaselement.Thecanvasisnotaddedtothe //documentitself,soitisneverdisplayedinthe //browserwindow. varcanvas=document.createElement("canvas"); //GetWebGLRenderingContextfromcanvaselement. vargl=canvas.getContext("webgl") ||canvas.getContext("experimental-webgl"); //Reporttheresult. if(gl&&glinstanceofWebGLRenderingContext){ paragraph.innerHTML= "Congratulations!YourbrowsersupportsWebGL."; }else{ paragraph.innerHTML="FailedtogetWebGLcontext." +"YourbrowserordevicemaynotsupportWebGL."; } } },false); 这个例子的源代码可以在GitHub上获取。

«上一页 下一页» Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年3月22日,byMDNcontributors