数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 JavaScript 中检查浏览器是否支持 OffscreenCanvas？
在 HTML 中，当我们只想使用 HTML 和 JavaScript 在网页上显示动画或 3D 对象时，Canvas 非常重要。
OffscreenCanvas 允许用户在屏幕外渲染动画和图形。这意味着当我们使用 canvas 时，它通过 Web 应用程序的主线程与用户交互，但 OffscreenCanvas 不会。因此，我们可以使用 OffscreenCanvas 来提高应用程序的性能。
在任何浏览器中使用 OffscreenCanvas 之前，我们需要检查浏览器是否支持它；否则，我们需要使用 canvas。
因此，我们将学习两种方法来检查是否支持 OffscreenCanvas。
方法一：使用 typeof 运算符
typeof 运算符允许开发者检查 JavaScript 中变量的类型。在这里，我们将检查 OffscreenCanvas 的类型。如果在特定浏览器中 OffscreenCanvas 的类型未定义，则表示该浏览器不支持它。
语法
用户可以按照以下语法使用 typeof 运算符来检查浏览器是否支持 OffscreenCanvas：
if (typeof OffscreenCanvas === "undefined") {
// not supported
} else {
// supported
}
在上述语法中，我们已将 OffscreenCanvas 用作 typeof 运算符的操作数。
示例
在下面的示例中，当用户单击按钮时，它将调用 isSupported() 函数。isSupported() 函数使用 typeof 运算符获取特定浏览器中 OffscreenCanvas 的类型，并使用 if-else 语句检查它是否未定义或其他内容。
<html>
<body>
<h3>Using the <i> typeof </i> operator to check if OffscreenCanvas is supported by Browser or not</h3>
<button onclick = "isSupported()"> Check OffscreenCanvas is supported </button>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
function isSupported() {
if (typeof OffscreenCanvas === "undefined"){
output.innerHTML +=
"The OffscreenCanvas in this browser is not supported!";
} else {
output.innerHTML +=
"The OffscreenCanvas in this browser is supported!";
}
}
</script>
</body>
</html>
方法二：使用 canvas 的 transferControlToOffscreen 函数
我们可以在 HTML 中创建一个简单的 canvas。之后，如果我们想使用 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() canvas 方法作为 typeof 运算符的操作数来检查其类型。
用户可以在输出中观察到，Chrome 浏览器支持 OffScreenCanvas，它返回“function”作为 transferControlToOffscreen() 方法的类型。
<html>
<body>
<h3>Using the <i> transferControlToOffscreen </i> function to check if OffScreenCanvas is supported by Browser or not </h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
function isSupported() {
var canvas_sample = document.createElement("canvas");
if (typeof canvas_sample.transferControlToOffscreen !== "function") {
output.innerHTML +=
"The OffScreenCanvas in this browser is not supported!";
} else {
output.innerHTML +=
"The OffScreenCanvas in this browser is supported!";
}
}
isSupported();
</script>
</body>
</html>
用户学习了两种方法来检查浏览器是否支持 OffscreenCanvas。但是，我们在两种方法中都使用了 typeof 运算符。尽管如此，我们在第一种方法中检查 OffscreenCanvas 的类型，在第二种方法中检查 transferControlToOffscreen() 函数的类型。
380 次浏览
