資料結構
網路
關係型資料庫管理系統 (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 次瀏覽
