HTML | DOM 画布对象

DOM Canvas 对象用于表示 HTML 元素。 标签用于使用 javascript 在文档中绘制图形。它是 HTML5 中的新功能。画布元素由getElementById()访问。

句法：

accessed by getElementById("id"). 

其中“id”是分配给Canvas标签的 ID。

示例 1：

  

    canvas Tag

  

    
        
           GeeksForGeeks
        
        DOM Canvas Object
        
        
        
        
        
        
        
        
        
        Submit
         
      
            function myGeeks() {
  
                var gfg = document.getElementById("geeks");
                
                var sudo = gfg.getContext("2d");
                sudo.beginPath();
                sudo.arc(100, 100, 90, 0, 2 * Math.PI);
                sudo.stroke();
            }
        

  

输出：
点击按钮前：

点击按钮后：

示例 2：可以使用 document.createElement方法创建 Canvas 对象。

  

    
        canvas {
            border: 3px solid black;
        }
    

  

    
      GeeksForGeeks
    
    DOM Canvas Object
    
    
      Submit
    
  
    
        function myGeeks() {
            var geeks = document.createElement("CANVAS");
            var gfg = geeks.getContext("2d");
            gfg.fillStyle = "green";
            gfg.fillRect(40, 40, 200, 100);
            document.body.appendChild(geeks);
        }
    
  

  

输出：
点击按钮前：

点击按钮后：

支持的浏览器： DOM Canvas Object支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器