如何在 JavaScript 中检查浏览器是否支持 OffscreenCanvas？

在 HTML 中，当我们想要仅使用 HTML 和 JavaScript 在网页上显示动画或 3D 对象时，Canvas 非常重要。

offscreenCanvas 允许用户在屏幕外渲染动画和图形。这意味着当我们使用画布时，它通过 Web 应用程序的主线程与用户交互，但 offscreenCanvas 不会。因此，我们可以使用 offscreenCanvas 来提高应用程序的性能。

在任何浏览器上使用offscreenCanvas之前，我们需要检查浏览器是否支持；否则，我们需要使用canvas。

因此，我们将学习两种方法来检查是否支持 offscreenCanvas。

方法 1：使用 typeof 运算符

typeof 运算符允许开发人员检查 JavaScript 中变量的类型。在这里，我们将检查 offscreenCanvas 的类型。如果offscreenCanvas的类型在特定的浏览器中未定义，则意味着该浏览器不支持它

语法

用户可以按照以下语法检查浏览器是否支持 offscreenCanvas 或不使用 typeof 运算符 -

if (typeof OffscreenCanvas === "undefined") {
   // not supported
} else {
   // supported
}

在上面的语法中，我们使用了 offscreenCanvas 作为 typeof 运算符的操作数。

示例

在下面的示例中，当用户单击按钮时，它会调用 isSupported() 函数。 isSupported() 函数使用 typeof 运算符获取特定浏览器中 offscreenCanvas 的类型，并使用 if-else 语句检查它是否未定义或其他内容。

   
Using the  typeof  operator to check if OffscreenCanvas is supported by Browser or not
    Check OffscreenCanvas is supported 
   
 
   

方式二：使用canvas的transferControlToOffscreen函数

我们可以用 HTML 创建一个简单的画布。之后，如果我们想使用OffScreenCanvas，我们需要调用transferControlToOffscreen()函数。如果浏览器支持 OffScreenCanvas，则也支持 OffScreenCanvas 的每个属性和方法。

因此，我们将检查transferControlToOffscreen()函数的类型，如果它返回“function”，则表示浏览器支持OffScreenCanvas。

语法

用户可以按照下面的语法通过检查transferControlToOffscreen()函数的类型来检查浏览器是否支持OffScreenCanvas。

// Creating the canvas element
var canvas_sample = document.createElement("canvas");
if (typeof canvas_sample.transferControlToOffscreen !== "function") {
   //Browser doesn't support OffScreenCanvas
} else {
   //Browser supports OffScreenCanvas
}

在上面的语法中，我们创建了canvas元素，并通过将其作为引用并检查其类型来访问transferControlToOffscreen()。

示例

在此示例中，我们使用 JavaScript 的 createElement() 方法创建一个 canvas_sample 元素。之后，我们使用transferControlToOffscreen()画布方法作为typeof运算符的操作数来检查其类型。

用户可以在输出中观察到，Chrome 浏览器支持 OffScreenCanvas，并且它返回“函数”作为 TransferControlToOffscreen() 方法的类型。

   
Using the  transferControlToOffscreen  function to check if OffScreenCanvas is supported by Browser or not  
   
 
   

用户学习了两种方法来检查浏览器是否支持 OffScreenCanvas。然而，我们在这两种方法中都使用了 typeof 运算符。尽管如此，我们还是在第一种方法中检查 OffScreenCanvas 的类型，在第二种方法中检查 transferControlToOffscreen() 函数的类型。

以上是如何在 JavaScript 中检查浏览器是否支持 OffscreenCanvas？的详细内容。更多信息请关注PHP中文网其他相关文章！