Heim > Artikel > Web-Frontend > Wie überprüfe ich, ob der Browser OffscreenCanvas in JavaScript unterstützt?
Wie überprüfe ich, ob der Browser OffscreenCanvas in JavaScript unterstützt?
- WBOYnach vorne
- 2023-08-24 10:25:091468Durchsuche
In HTML ist Canvas sehr wichtig, wenn wir Animationen oder 3D-Objekte auf einer Webseite nur mit HTML und JavaScript anzeigen möchten.
offscreenCanvas ermöglicht Benutzern das Rendern von Animationen und Grafiken außerhalb des Bildschirms. Das bedeutet, dass, wenn wir die Leinwand verwenden, diese über den Hauptthread der Webanwendung mit dem Benutzer interagiert, offscreenCanvas jedoch nicht. Daher können wir offscreenCanvas verwenden, um die Leistung unserer Anwendung zu verbessern.
Bevor wir offscreenCanvas in einem Browser verwenden, müssen wir prüfen, ob der Browser es unterstützt. Andernfalls müssen wir Canvas verwenden.
Also lernen wir zwei Methoden kennen, um zu überprüfen, ob offscreenCanvas unterstützt wird.
Methode 1: Typoperator verwenden
Mit dem Operatortypeof können Entwickler den Typ von Variablen in JavaScript überprüfen. Hier überprüfen wir den Typ von OffscreenCanvas. Wenn der Typ von offscreenCanvas in einem bestimmten Browser nicht definiert ist, bedeutet dies, dass der Browser ihn nicht unterstützt
Grammatik
Benutzer können anhand der folgenden Syntax überprüfen, ob der Browser offscreenCanvas unterstützt oder nicht
if (typeof OffscreenCanvas === "undefined") {
// not supported
} else {
// supported
}
In der obigen Syntax haben wir offscreenCanvas als Operanden des Typeof-Operators verwendet. Beispiel
Wenn der Benutzer im folgenden Beispiel auf die Schaltfläche klickt, ruft er die Funktion isSupported() auf. Die Funktion isSupported() verwendet den Operator „typeof“, um den Typ von „offscreenCanvas“ in einem bestimmten Browser abzurufen, und verwendet eine if-else-Anweisung, um zu prüfen, ob es undefiniert ist oder so.
<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>
Methode 2: Verwenden Sie die transferControlToOffscreen-Funktion von CanvasWir können mit HTML eine einfache Leinwand erstellen. Wenn wir anschließend OffScreenCanvas verwenden möchten, müssen wir die Funktion transferControlToOffscreen() aufrufen. Wenn der Browser OffScreenCanvas unterstützt, werden auch alle Eigenschaften und Methoden von OffScreenCanvas unterstützt.
Also prüfen wir den Typ der Funktion transferControlToOffscreen(). Wenn sie „Funktion“ zurückgibt, bedeutet das, dass der Browser OffScreenCanvas unterstützt.
Grammatik
Benutzer können überprüfen, ob der Browser OffScreenCanvas unterstützt, indem sie den Typ der transferControlToOffscreen()-Funktion gemäß der folgenden Syntax überprüfen.
// 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
}
In der obigen Syntax haben wir das Canvas-Element erstellt und auf transferControlToOffscreen() zugegriffen, indem wir es als Referenz genommen und seinen Typ überprüft haben. Beispiel
In diesem Beispiel erstellen wir ein „canvas_sample“-Element mit der Methode „createElement()“ von JavaScript. Danach verwenden wir die Canvas-Methode transferControlToOffscreen() als Operanden des Typeof-Operators, um seinen Typ zu überprüfen.
Benutzer können in der Ausgabe beobachten, dass der Chrome-Browser OffScreenCanvas unterstützt und „Function“ als Typ der TransferControlToOffscreen()-Methode zurückgibt.
<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>
Benutzer haben zwei Möglichkeiten kennengelernt, um zu überprüfen, ob der Browser OffScreenCanvas unterstützt. Allerdings verwenden wir in beiden Methoden den Operator typeof. Dennoch überprüfen wir den Typ von OffScreenCanvas in der ersten Methode und die Funktion transferControlToOffscreen() in der zweiten Methode. Das obige ist der detaillierte Inhalt vonWie überprüfe ich, ob der Browser OffscreenCanvas in JavaScript unterstützt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!