如何判断屏幕外画布上的 2D 上下文是否可用？答案

【问题标题】：How to tell if 2D context on offscreen canvas is available?如何判断屏幕外画布上的 2D 上下文是否可用？
【发布时间】：2019-08-01 16:35:30
【问题描述】：

我正在尝试使用屏幕外画布在 webworker 中进行渲染，这在 Chrome 中运行良好，但似乎 2D 上下文在 Firefox 中尚不可用。我怎么会提前知道呢？当我开始创建上下文时，已经太晚了，原来的画布已经不能用于绘图了。

基本上我在做什么

const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({canvas: offscreen});
...
// in worker
canvas.getContext("2d") // exception!
// but there's no fallback now, because we already called transferControlToOffscreen

编辑：不知何故，在“试验”主要画布之前，我没有想到要创建另一个画布并使其脱离屏幕。这行得通，但看起来像个 hack。

【问题讨论】：

标签： javascript firefox canvas

【解决方案1】：

OffscreenCanvas.getContext('2d') 返回的上下文是一个OffscreenCanvasRenderingContext2D 实例。
支持此调用的浏览器将提供此接口，因此您只需要：

const supports = typeof OffscreenCanvasRenderingContext2D === "function";

console.log(`Your browser ${supports ? "supports" : "doesn't support" } the 2d context of the OffscreenCanvas`);

【讨论】：

【解决方案2】：

您必须同时连接getContext 和getContext('2d')：

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

【讨论】：

2D 上下文在常规画布上可用，但不在屏幕外。
OffscreenCanvas.getContext() 方法返回屏幕外画布的绘图上下文，如果不支持上下文标识符，则返回 null。不必抛出异常。
它会抛出一个名为 NS_ERROR_NOT_IMPLEMENTED 的异常。
另一种解决方法是检索浏览器和版本，而不是测试 getContext，或者更好地将检查包含在 try/catch 中，以便您可以安全地管理和区分错误