Question

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

从检查来源，我发现它在任何一种情况下都是画布。

Answer 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);

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

Answer 2

Canvas不会运行任何东西 - 它只是一个在两种情况下都具有可修改位图的元素。它本身不能告诉它用于什么。

Canvas可以为您提供 上下文 ，但也可以。如果由于某种原因你无法在源代码中看到正在请求的上下文，你总是可以测试上下文（有点落后但是这里有）：

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';
}

{em}浏览器中的测试支持对WebGLRenderingContext的测试无效。即使浏览器支持WebGL，也不会获得WebGL上下文，因为这依赖于计算机及其硬件功能。

Answer 3

如果你执行canvas.getContext('2d')并且它返回null它不是2d上下文，对于其他上下文类型也是如此。另一方面，如果尚未创建上下文，则会创建上下文。

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

3 个答案: