HTML<canvas>标签

HTML 中的 标签用于使用 JavaScript 在网页上绘制图形。它可用于绘制路径、框、文本、渐变和添加图像。默认情况下，它不包含边框和文本。

注意： 标签是 HTML5 中的新标签。

句法：

 Contents... 

属性：标签接受上面提到和下面描述的两个属性。

• height :该属性用于设置画布的高度。
• width :该属性用于设置画布的宽度。

示例 1：

输出：

示例 2：

HTML

      
    
        
        
        
          
        
            var c = document.getElementById("geeks");
            var cx = c.getContext("2d");
            cx.beginPath();
            cx.arc(100, 100, 90, 0, 2 * Math.PI);
            cx.stroke();
        
            
    

输出：

示例 3：

HTML

    
          
        
        
        
        
          
        
            var c=document.getElementById("geeks");
            var cx = c.getContext("2d");
            var grd = cx.createRadialGradient(100, 
                            100, 5, 100, 100, 100);
            grd.addColorStop(0, "red");
            grd.addColorStop(1, "green");
            cx.fillStyle = grd;
            cx.fillRect(0, 0, 200, 200);
        
        
    

输出：

支持的浏览器：

• 谷歌浏览器 4.0
• 浏览器 9.0
• 火狐 2.0
• 歌剧 9.0
• Safari 3.1