Wie überprüfe ich, ob der Browser OffscreenCanvas in JavaScript unterstützt?-js-Tutorial-php.cn

Wie überprüfe ich, ob der Browser OffscreenCanvas in JavaScript unterstützt?

WBOY

Freigeben： 2023-08-24 10:25:09

nach vorne

1551 Leute haben es durchsucht

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

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 Operator

typeof 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
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

Methode 2: Verwenden Sie die transferControlToOffscreen-Funktion von Canvas

Wir 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
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!