网页 HTMLCanvasElement API | CanvasElement 高度属性

在 HTML 中有一个canvas 元素，它有一个 height 属性，它以 CSS 像素表示画布的高度。有一个HTMLCanvasElement.height属性，我们可以通过它从画布元素中获取这个高度属性，它是一个正整数。

句法：

var heightVal = canvas.height;
canvas.height = heightVal;

注意：如果没有提供高度属性值或设置为未定义值，如负值，则默认值设置为 150。

示例 1：高度属性设置为 300

  

  
    
        a:focus {
            background-color: magenta;
        }
    
    
    
        function getHeight() {
            var canvas = document.getElementById('canvas');
  
            document.getElementById('height').innerHTML = canvas.height;
        }
    
  

  

    
  
          
                GeeksForGeeks  
            
  
        HTML Canvas Element height property
        Get Height
        
    

  

输出：
点击按钮：

单击按钮时：

示例 2：未提供高度属性

  

  
    
        a:focus {
            background-color: magenta;
        }
    
    
    
        function getHeight() {
            var canvas = document.getElementById('canvas');
  
            document.getElementById('height').innerHTML = canvas.height;
        }
    
  

  

    
  
          
                GeeksForGeeks  
            
  
        HTML Canvas Element height property
        Get Height
        
    

  

输出：
点击按钮：

单击按钮时：

支持的浏览器：

• 谷歌浏览器 4
• 边缘 12
• 火狐 3.6
• 野生动物园 3.1
• 歌剧 9
• 互联网浏览器 9