如何检测HTML 5中的`<canvas>`在JavaScript中不被支持

方法1：创建一个canvas元素并使用getContext()方法

canvas对象的getContext()方法返回canvas元素的绘图上下文。如果上下文标识符不被支持，则返回null。可以利用此属性来检查canvas元素是否被支持，因为非HTML5支持的浏览器会返回NULL。

首先使用document.createElement()方法创建一个新的canvas元素，并在此canvas元素上使用getContext()方法，参数为’2d’。它将检查’二维’渲染上下文的上下文标识符。

为了将返回值转换为布尔值，使用双重否定(!!)在结果之前。这将强制结果被转换为布尔值。NULL将被转换为false，而任何其他非NULL值将被转换为true。将转换后的结果用于检查浏览器是否支持HTML 5中的canvas。

示例：

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

输出:

点击按钮之前:

如何检测HTML 5中的canvas在JavaScript中不被支持

点击按钮之后:

如何检测HTML 5中的canvas在JavaScript中不被支持

方法2: 检查HTMLCanvasElement接口

HTMLCanvasElement是一个接口，它提供了操作canvas对象的属性和方法。可以通过window对象访问该接口，以检查canvas元素是否受支持。如果返回的值是NULL，则表示不支持canvas元素。

将返回值转换为布尔值时，在结果之前使用双重否定（!!）。这将强制结果转换为布尔值。NULL将转换为false，任何其他非NULL值将转换为true。转换结果可用于检查浏览器是否支持HTML5的canvas。

示例:

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

输出: