Heim >Web-Frontend >js-Tutorial >Wie überprüfe ich, ob der Browser OffscreenCanvas in JavaScript unterstützt?

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBnach vorne: 2023-08-24 10:25:091682Durchsuche

如何在 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
}

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

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!

JavaScript chrome html 运算符 if 线程主线程 function 对象 typeof canvas

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie zentriere ich ein Objekt mithilfe von FabricJS vertikal relativ zum aktuellen Ansichtsfenster der Leinwand in IText?Nächster Artikel：Wie zentriere ich ein Objekt mithilfe von FabricJS vertikal relativ zum aktuellen Ansichtsfenster der Leinwand in IText?

In Verbindung stehende Artikel

Mehr sehen