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

Question

如何知道画布是运行"WebGL"还是普通画布？

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

stackover流程似乎阻止我提交问题,除非它足够长所以这段只是为了满足stackoverflow人.

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.

另一种选择是你可以像这样包装 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.getContext('2d')，它返回的null不是二维上下文，对于其他上下文类型也是如此。另一方面，如果尚未创建上下文，它将创建上下文。