Question

如何获取给定画布上的可用上下文列表？不幸的是，因为https://stackoverflow.com/a/13406681/2054629所以在每个可能的选项上使用getContext都不起作用所以

var testWebGl = function() {
  var canvas = document.createElement('canvas');
  return !!(canvas.getContext('webgl') || canvas.getContext('canvas.getContext('webgl')');
};

不起作用

我正在努力获得更好的理解，而在我的代码中，某些时候webgl上下文可用，有时则没有。我有一些用户，新创建的画布将具有webgl上下文，而我感兴趣的画布将失败。我想要更好地理解这一点。所以创建新画布的解决方案在这里不起作用......

目前我正在做的事情：

if (testWebGl())
  doSomeWebGlStuff(myCanvas);

然后

doSomeWebGlStuff

偶尔myCanvas会失败，因为我无法在{{1}}上获得webgl上下文。所以我想在我感兴趣的确切画布上获得所有可用的上下文。

Answer 1

由于在所有情况下都为getContext()使用相同的画布对象，因此代码无法正常工作。测试必须在不同于您实际使用的元素的元素上执行，这意味着您必须在每个getContext()之前创建一个新的canvas元素实例，因为@tommie在他现在删除的答案中显示（运行代码片段是证据）那个）。

作为参考，这就是tommie在他的回答中所做的一些修改/评论：

var possibleContexts = ['bitmaprenderer', '2d', 'webgl', 'webgl2', 'experimental-webgl', 'experimental-webgl2'];
var availableContexts = possibleContexts.filter(function(c) {
  var canvas = document.createElement("canvas");  // new canvas element for test only
  if (canvas.getContext(c)) {return c}
});

您也可以直接检查上下文对象是否存在：

var availableContexts = [];

if (typeof CanvasRenderingContext2D !== "undefined")
    availableContexts.push("2d");

// prefer webgl over experimental-webgl
var hasWebGL = !!document.createElement("canvas").getContext("webgl");

if (typeof WebGLRenderingContext !== "undefined")
    availableContexts.push(hasWebGL ? "webgl" : "experimental-webgl");

...etc.

根据需要进行调整。

HTML5 - Canvas可用的上下文

1 个答案: