检查对离屏画布的支持

Question

我有一个 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 isn’t in JavaScript?

Answer 1

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

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');
}