javascript - 检查对离屏 Canvas 的支持

Question

我有一个 HTML/JavaScript SPA，我想检查浏览器是否支持 Offscreen canvas。

我试过

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?

Answer 1

您可以检查 Canvas 的原型(prototype)，这是一种比创建 Canvas 元素轻得多的检查方法。

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 和支持将 Canvas 传输到屏幕外 Canvas 在技术上不是一回事。浏览器支持 OffscreenCanvas 并且不支持将 Canvas 的控件转移到一个 Canvas 的可能性可能为 0%。所以从技术上讲，要检查 OffscreenCanvas 支持，您可以这样做

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