如何知道画布是普通画布还是 webgl 画布答案

【问题标题】：How to know if a canvas is a normal canvas or a webgl canvas如何知道画布是普通画布还是 webgl 画布
【发布时间】：2014-03-31 07:21:59
【问题描述】：

如何知道一个画布是在运行“WebGL”还是只是普通的画布？

通过检查源代码，我发现它在任何一种情况下都是画布。

【问题讨论】：

寻找 window.WebGLRenderingContext。更多info

标签： javascript canvas webgl

【解决方案1】：

这真的取决于你想如何去发现。

例如你可以像这样调用`getContext'

if (someCanvas.getContext("2d")) {
  // It's a 2D canvas
} else if (someCanvas.getContext("experimental-webgl") || 
           someCanvas.getContext("webgl")) {
  // It's a WebGL canvas
}

不幸的是，如果以前没有人调用过getContext，这也会使画布成为 2D 画布。

另一种选择是你可以像这样包装 getContext

(function() {

  var originalGetContextFunction = HTMLCanvasElement.prototype.getContext;

  HTMLCanvasElement.prototype.getContext = function() {
    var type = arguments[0];
    var ctx = originalGetContextFunction.apply(this, arguments);
    if (ctx && !this.canvasType) {
      this.canvasType = type;
    }
    return ctx;
  };

}());

现在对于任何画布，您都可以检查 someCanvas.canvasType 以找出传递给 getContext 的字符串。示例：

var c1 = document.createElement("canvas");
var c2 = document.createElement("canvas");
var ctx = c1.getContext("2d");
var gl = c2.getContext("experimental-webgl");
alert("c1 is " + c1.canvasType + ", c2 is " + c2.canvasType);

只需确保在创建画布的任何代码之前包含包装器即可。

【讨论】：

我们应该在哪里运行 IIFE 函数？我们可以从控制台 devtools 中知道吗？

【解决方案2】：

Canvas 不运行任何东西——在这两种情况下，它只是一个带有可修改位图的元素。它本身无法说明它的用途。

Canvas 可以为您提供 contexts，尽管两者都可以。如果您由于某种原因无法在源代码中看到请求的上下文，您可以随时测试 context（有点落后，但这里是这样）：

if (ctx === null) {
    return 'unsupported';
}
else if (typeof ctx.viewport === 'undefined' && // test some existing non-shared
         typeof ctx.arc !== 'undefined') {      // method names
    return '2d';
}
else if (typeof ctx.viewport !== 'undefined' &&
         typeof ctx.arc === 'undefined') {
    return 'webgl';
}
else {
    return 'unknown';
}

测试WebGLRenderingContext 将无济于事，因为 浏览器 中支持此测试。即使浏览器支持 WebGL，您也不会获得 WebGL 上下文，因为这取决于计算机及其硬件能力。

【讨论】：

这意味着我无法知道浏览器中当前正在运行的画布是否正在使用 webgl，仅通过检查元素？不用 javascript 弄脏我的手？
@MahmoudBadri 使用的代码应该显示正在使用的内容:) 您可以搜索 2d 或 webgl（或 Experimental-webgl）以在源代码中找到它（按 ctrl+u 获取页面）。
是的，我知道，但它是一个名为 pixijs 的 js 库，它默认使用 webgl 并回退到画布。我只是想知道它当前是否在我的浏览器中使用 webgl 或 canvas :)
如何获取页面上<canvas>当前使用的上下文？

【解决方案3】：

如果您执行canvas.getContext('2d') 并返回null，则它不是二维上下文，其他上下文类型相同。另一方面，如果尚未创建上下文，它将创建上下文。

【讨论】：

这确实有效！在 Chrome 中，检查元素后，您可以执行 $0.getContext('2d')。如果它返回 null 则不是 2d 上下文。