javascript - 如何知道 Canvas 是普通 Canvas 还是webgl Canvas

Question

如何知道 Canvas 运行的是“WebGL”还是普通 Canvas ？

通过检查源代码，我发现这两种情况都是 Canvas 。

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，这也会使 Canvas 成为 2D Canvas 。

另一种选择是你可以像这样包装 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;
  };

}());

现在对于任何 Canvas ，您都可以检查 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);

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