ブラウザが JavaScript で OffscreenCanvas をサポートしているかどうかを確認するにはどうすればよいですか?

HTML では、HTML と JavaScript だけを使用して Web ページ上にアニメーションや 3D オブジェクトを表示したい場合、Canvas は非常に重要です。

offscreenCanvas を使用すると、ユーザーはアニメーションやグラフィックをオフスクリーンでレンダリングできます。つまり、キャンバスを使用すると、キャンバスは Web アプリケーションのメイン スレッドを通じてユーザーと対話しますが、offscreenCanvas は対話しません。したがって、offscreenCanvas を使用してアプリケーションのパフォーマンスを向上させることができます。

offscreenCanvas をブラウザで使用する前に、ブラウザがそれをサポートしているかどうかを確認する必要があります。サポートしていない場合は、canvas を使用する必要があります。

それでは、offscreenCanvas がサポートされているかどうかを確認する 2 つの方法を学びます。

方法 1: typeof 演算子を使用する

typeof 演算子を使用すると、開発者は JavaScript の変数の型をチェックできます。ここではoffscreenCanvasの種類を確認してみます。 offscreenCanvas のタイプが特定のブラウザーで定義されていない場合は、ブラウザーがそれをサポートしていないことを意味します

＃＃＃文法＃＃＃

ユーザーは次の構文に従って、ブラウザが offscreenCanvas をサポートしているか、typeof 演算子を使用していないかを確認できます -

リーリー

上記の構文では、typeof 演算子のオペランドとして offscreenCanvas を使用します。

＃＃＃例＃＃＃

以下の例では、ユーザーがボタンをクリックすると、isSupported() 関数が呼び出されます。 isSupported() 関数は、typeof 演算子を使用して特定のブラウザーの offscreenCanvas のタイプを取得し、if-else ステートメントを使用してそれが未定義かどうかを確認します。

リーリー

方法 2: Canvas の transferControlToOffscreen 関数を使用する

HTML を使用して簡単なキャンバスを作成できます。その後、OffScreenCanvas を使用したい場合は、transferControlToOffscreen() 関数を呼び出す必要があります。ブラウザーが OffScreenCanvas をサポートしている場合は、OffScreenCanvas のすべてのプロパティとメソッドもサポートされます。

そこで、transferControlToOffscreen() 関数のタイプを確認します。関数が「function」を返した場合、ブラウザーが OffScreenCanvas をサポートしていることを意味します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って transferControlToOffscreen() 関数の型をチェックすることで、ブラウザが OffScreenCanvas をサポートしているかどうかを確認できます。

リーリー

上記の構文では、canvas 要素を作成し、それを参照として取得し、その型を確認することで transferControlToOffscreen() にアクセスします。

＃＃＃例＃＃＃

この例では、JavaScript の createElement() メソッドを使用して Canvas_sample 要素を作成します。その後、transferControlToOffscreen() キャンバス メソッドを typeof 演算子のオペランドとして使用して、その型を確認します。

ユーザーは、Chrome ブラウザが OffScreenCanvas をサポートし、TransferControlToOffscreen() メソッドのタイプとして「Function」を返すことを出力で確認できます。

リーリー

ユーザーは、ブラウザが OffScreenCanvas をサポートしているかどうかを確認する 2 つの方法を学びました。ただし、両方のメソッドで typeof 演算子を使用します。それにもかかわらず、最初のメソッドで OffScreenCanvas のタイプをチェックし、2 番目のメソッドで transferControlToOffscreen() 関数をチェックします。

以上がブラウザが JavaScript で OffscreenCanvas をサポートしているかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。