HTML <canvas>用法及代码示例

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

注意：<canvas>标记是HTML5中的新标记。

用法:

<canvas id = "script"> Contents... </canvas>

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

HTML - Style height用法及代码示例：此属性用于设置画布的高度。
HTML - <object> width属性用法及代码示例：此属性用于设置画布的宽度。

范例1：

HTML

<!DOCTYPE html> 
<html> 
    <body> 
          
        <!-- canvas Tag starts here -->
        <canvas id = "GeeksforGeeks" width = "200" 
            height = "100" style = "border:1px solid black"> 
        </canvas> 
        <!-- canvas Tag ends here -->
          
    </body> 
</html>

输出：

范例2：

HTML

<!DOCTYPE html> 
<html> 
      
    <body> 
        <!-- HTML code to illustrate canvas tag -->
        <canvas id = "geeks" height = "200" width = "200"
            style = "border:1px solid black"> 
        </canvas> 
          
        <script> 
            var c = document.getElementById("geeks"); 
            var cx = c.getContext("2d"); 
            cx.beginPath(); 
            cx.arc(100, 100, 90, 0, 2 * Math.PI); 
            cx.stroke(); 
        </script> 
            
    </body> 
</html>

输出：

范例3：

HTML

<!DOCTYPE html> 
<html> 
    <body> 
          
        <!-- canvas tag starts here -->
        <canvas id = "geeks" width = "200" height = "200"
            style = "border:1px solid black"> 
        </canvas> 
        <!-- canvas tag ends here -->
          
        <script> 
            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); 
        </script> 
        
    </body> 
</html>

输出：

支持的浏览器：

谷歌浏览器4.0
Internet Explorer 9.0
Firefox 2.0
Opera 9.0
Safari 3.1

相关用法

注：本文由纯净天空筛选整理自sheyakhare1999大神的英文原创作品 HTML <canvas> Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。