网页 HTMLCanvasElement API |画布元素宽度属性

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

句法：

var widthVal = canvas.width;
canvas.width = widthVal;

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

示例 1：宽度属性设置为 500

  

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

  

    
  
          
                GeeksForGeeks  
            
  
        HTML Canvas Element width property
        Get Width
        
    

  

输出：
点击按钮：

单击按钮时：

示例 2：未提供宽度属性

  

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

  

    
  
          
                GeeksForGeeks  
            
  
        HTML Canvas Element width property
        Get Width
        
    

  

输出：
点击按钮：

单击按钮时：

支持的浏览器：

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