检测 WebGL

此示例演示了如何检测 WebGL 渲染上下文并将结果报告给用户。

功能检测 WebGL

在第一个示例中，我们将检查浏览器是否支持 WebGL。为此，我们将尝试从 canvas 元素中获取 WebGL 渲染上下文。 WebGL 渲染上下文是一个接口，您可以通过它设置和查询图形机器的状态、将数据发送到 WebGL 并执行绘制命令。

在单个上下文接口中保存图形机器的状态并非 WebGL 所独有。这在其他图形 API（例如 canvas 2D 渲染上下文）中也是如此。但是，您可以调整的属性和变量在每个 API 中都是不同的。

html

<p>[ Here would go the result of WebGL feature detection ]</p>
<button>Press here to detect WebGLRenderingContext</button>

css

body {
  text-align: center;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}

// Run everything inside window load event handler, to make sure
// DOM is fully loaded and styled before trying to manipulate it.
window.addEventListener(
  "load",
  () => {
    const paragraph = document.querySelector("p");
    const button = document.querySelector("button");

    // Adding click event handler to button.
    button.addEventListener("click", detectWebGLContext, false);
    function detectWebGLContext() {
      // Create canvas element. The canvas is not added to the
      // document itself, so it is never displayed in the
      // browser window.
      const canvas = document.createElement("canvas");

      // Get WebGLRenderingContext from canvas element.
      const gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

      // Report the result.
      paragraph.textContent =
        gl instanceof WebGLRenderingContext
          ? "Congratulations! Your browser supports WebGL."
          : "Failed. Your browser or device may not support WebGL.";
    }
  },
  false,
);

此示例的源代码也可在 GitHub 上获取。