检查对离屏画布的支持答案

【问题标题】：Check support for Offscreen canvas检查对离屏画布的支持
【发布时间】：2019-07-04 09:22:10
【问题描述】：

我有一个 HTML/JavaScript SPA，我想检查浏览器是否支持离屏画布。

我试过了

var canvasTest = document.createElement('canvas-test');

if(typeof canvasTest.transferControlToOffscreen === "function")
{
   return true;
}
else
{
   return false;
}

但它不起作用（即，即使浏览器实际上支持它，它也会返回 false）

我正在使用此代码来检查函数是否存在： How to check if function exists in JavaScript?

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

您的代码的问题是您创建了一个canvas-test dom 元素，它与canvas 不同。

试试这个。

var canvasTest = document.createElement('canvas');

if(typeof canvasTest.transferControlToOffscreen === "function")
{
   console.log('true');
}
else
{
   console.log('false');
}

【讨论】：

是的，我很傻。我在考虑一个 html id 而不是实际的 html 元素。谢谢
很遗憾 createElement() 如此放任，让我创建不存在的 HTML 元素
在 html5 中，您可以创建任何类型的 HTML 元素，它在这方面不像 XHTML 那样严格。
对于 Firefox 88（及更早版本）该方法存在，但验证它会抛出 NS_ERROR_NOT_IMPLEMENTED 异常。

【解决方案2】：

您可以检查画布的原型，这是一种比创建画布元素更轻量级的检查方式。

if (HTMLCanvasElement.prototype.transferControlToOffscreen) {
  console.log('support for transferring control of an offscreen canvas exists');
} else {
  console.log('support for transferring control of an offscreen canvas does NOT exist');
}

请注意，OffscreenCanvas 和支持将画布转移到屏幕外画布在技术上并不是一回事。浏览器支持OffscreenCanvas 并且不支持将画布的控件转移给一个的可能性虽然可能为 0%。所以在技术上检查OffscreenCanvas 支持你会这样做

if (typeof OffscreenCanvas !== 'undefined') {
  console.log('OffscreenCanvas is supported');
} else {
  console.log('OffscreenCanvas is NOT supported');
}

【讨论】：