OffscreenCanvas es una interfaz que proporciona un lienzo para renderizar fuera de la pantalla. Es posible que esta función no sea compatible con todos los navegadores. El soporte para OffscreenCanvas se puede verificar usando dos enfoques:
Método 1: verificar si OffscreenCanvas existe: el operador typeof se usa para devolver una string del tipo del operando. El objeto OffscreenCanvas se puede probar si el navegador lo admite mediante este operador. Este operador devuelve ‘indefinido’ si un objeto no existe.
El objeto OffscreenCanvas se compara con la string ‘indefinida’ para ver si existe. Esta declaración devuelve verdadero si el objeto está definido. Significa que OffscreenCanvas es compatible con el navegador.
Sintaxis:
if (typeof OffscreenCanvas !== "undefined") {
isSupported = true;
} else {
isSupported = false;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to check the OffScreenCanvas
is supported by the Browser or not?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to check the OffScreenCanvas is
supported by the Browser or not?
</b>
<p>
Click on the button to check
for OffscreenCanvas support
</p>
<p>
OffscreenCanvas is supported:
<span class="output"></span>
</p>
<button onclick="checkOffscreenCanvas()">
Check for OffscreenCanvas
</button>
<script type="text/javascript">
function checkOffscreenCanvas() {
if (typeof OffscreenCanvas !== "undefined") {
isSupported = true;
} else {
isSupported = false;
}
document.querySelector(".output").textContent
= isSupported;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Verificar si el método transferControlToOffscreen es una función: TransferControlToOffscreen se usa para transferir el control del lienzo a un objeto OffscreenCanvas.
Esta función se utiliza para la inicialización de OffscreenCanvas. Se puede probar si se define mediante el uso del operador typeof con el operador de igualdad estricta (===) y comprobando la string ‘función’. Esta declaración devuelve verdadero si la función está definida, lo que significa que OffscreenCanvas es compatible con el navegador.
Sintaxis:
let canvasObj = document.createElement("canvas");
if (typeof canvasObj.transferControlToOffscreen === "function") {
isSupported = true;
} else {
isSupported = false;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to check the OffScreenCanvas
is supported by the Browser or not?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to check the OffScreenCanvas is
supported by the Browser or not?
</b>
<p>
Click on the button to check for
OffscreenCanvas support
</p>
<p>
OffscreenCanvas is supported:
<span class="output"></span>
</p>
<button onclick="checkOffscreenCanvas()">
Check for OffscreenCanvas
</button>
<script type="text/javascript">
function checkOffscreenCanvas() {
let canvasObj = document.createElement("canvas");
if (typeof canvasObj.transferControlToOffscreen
=== "function") {
isSupported = true;
} else {
isSupported = false;
}
document.querySelector('.output').textContent
= isSupported;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA