Método 1: Cree un elemento de lienzo y use el método getContext(): El método getContext() de un objeto de lienzo se usa para devolver el contexto de dibujo del elemento de lienzo. Devuelve nulo si el identificador de contexto no es compatible. Esta propiedad se puede utilizar para comprobar si el elemento canvas es compatible, ya que un navegador que no admita HTML5 devolvería NULL.
Primero se crea un nuevo elemento de lienzo usando el método document.createElement(). El método getContext() se usa en este elemento de lienzo con ‘2d’ como parámetro. Verificará el identificador de contexto de un contexto de representación ‘bidimensional’.
Para convertir el valor devuelto en un valor booleano, se utiliza la doble negación (!!) antes del resultado. Esto obligará a convertir el resultado en un valor booleano. Un NULL se convertiría en falso y cualquier otro valor que no sea NULL se convertiría en verdadero. El resultado emitido se puede usar para verificar si el lienzo HTML 5 es compatible con el navegador.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to detect HTML 5 canvas is
not supported by JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to detect that HTML5 <canvas>
is not supported by JavaScript?
</b>
<p>
Click on the button to check
for Canvas support
</p>
<p>
Canvas is supported:
<span class="output"></span>
</p>
<button onclick="checkCanvas()">
Check for canvas
</button>
<script type="text/javascript">
function checkCanvas() {
canvasElem = document.createElement('canvas');
isSupported = !!canvasElem.getContext('2d');
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: Comprobación de la interfaz HTMLCanvasElement: HTMLCanvasElement es una interfaz que proporciona propiedades y métodos para manipular un objeto de lienzo. Se puede acceder a esta interfaz desde el objeto de la ventana para verificar si el elemento del lienzo es compatible. Si el valor devuelto es NULL, significa que no hay soporte para el elemento canvas.
Para convertir el valor devuelto en un valor booleano, se utiliza la doble negación (!!) antes del resultado. Esto obligará a convertir el resultado en un valor booleano. Un NULL se convertiría en falso y cualquier otro valor que no sea NULL se convertiría en verdadero. El resultado de la conversión se puede usar para verificar si el lienzo HTML5 es compatible con el navegador.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to detect HTML 5 canvas is
not supported by JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to detect that HTML5 <canvas>
is not supported by JavaScript?
</b>
<p>
Click on the button to check
for Canvas support
</p>
<p>
Canvas is supported:
<span class="output"></span>
</p>
<button onclick="checkCanvas()">
Check for canvas
</button>
<script type="text/javascript">
function checkCanvas() {
isSupported = !!window.HTMLCanvasElement;
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