HTML5 - 画布可用上下文答案

【问题标题】：HTML5 - Canvas available contextsHTML5 - 画布可用上下文
【发布时间】：2016-04-05 08:10:28
【问题描述】：

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

var possibleContexts = ['2d', 'webgl', 'webgl2', 'experimental-webgl', 'experimental-webgl2', ...];
var availableContexts = possibleContexts.filter(function(c) { return canvas.getContext(c); });

不会工作

我试图更好地理解，而在我的代码中，webgl 上下文有时可用，有时不可用。我有一个新创建的画布将具有 webgl 上下文的用户，而我感兴趣的那个却失败了。我试图更好地理解这一点。所以创建新画布的解决方案在这里不起作用......

目前我正在做的事情如下：

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

然后

if (testWebGl())
  doSomeWebGlStuff(myCanvas);

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

【问题讨论】：

标签： html5-canvas

【解决方案1】：

代码不起作用，因为您在所有情况下都为getContext() 使用相同的画布对象。测试必须在与您打算实际使用的元素不同的元素上执行，这意味着您必须在每个getContext() 之前创建一个新的画布元素实例，正如@tommie 在他现在已删除的答案中所示（运行 sn-p 是证据）。

作为参考，这是 tommie 在他的回答中对小修改/cmets 所做的：

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.

根据需要进行调整。

【讨论】：