HTML canvas lineCap用法及代码示例

canvas lineCap属性用于设置或返回线端盖的样式。该线可以具有以下三种帽形样式之一：对接，圆形或正方形。 canvas lineCap属性的默认值为butt。必须在调用stroke()函数之前设置lineCap属性。

用法:

context.lineCap = "butt|round|square";

属性值：

butt:这是默认样式。此属性值将在行的两端添加平坦边。
round:此属性值将在行的两端添加端盖。
square:此属性值在该行的每一端添加方形帽。

注意：圆角和正方形值使线条稍长。

范例1：本示例说明了对接属性值。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas lineCap Property 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1>GeeksforGeeks</h1> 
      
    <h2>HTML canvas lineCap Property</h2> 
      
    <canvas id="GFG" width="500" height="200"
        style="border:1px solid black;"> 
    </canvas> 
      
    <script> 
        var canvas_id = document.getElementById("GFG"); 
        var context = canvas_id.getContext("2d"); 
          
        context.beginPath(); 
        context.lineWidth = 35; 
        context.lineCap = "butt"; 
        context.moveTo(50, 100); 
        context.lineTo(450, 100); 
        context.strokeStyle ="green"; 
        context.stroke(); 
    </script> 
</body> 
  
</html>

输出：

范例2：本示例说明了舍入属性值。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas lineCap Property 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1>GeeksforGeeks</h1> 
      
    <h2>HTML canvas lineCap Property</h2> 
      
    <canvas id="GFG" width="500" height="200"
        style="border:1px solid black;"> 
    </canvas> 
      
    <script> 
        var canvas_id = document.getElementById("GFG"); 
        var context = canvas_id.getContext("2d"); 
          
        context.beginPath(); 
        context.lineWidth = 35; 
        context.lineCap = "round"; 
        context.moveTo(50, 100); 
        context.lineTo(450, 100); 
        context.strokeStyle ="green"; 
        context.stroke(); 
    </script> 
</body> 
  
</html>

输出：

范例3：本示例说明了平方属性值。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas lineCap Property 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1>GeeksforGeeks</h1> 
      
    <h2>HTML canvas lineCap Property</h2> 
      
    <canvas id="GFG" width="500" height="200"
        style="border:1px solid black;"> 
    </canvas> 
      
    <script> 
        var canvas_id = document.getElementById("GFG"); 
        var context = canvas_id.getContext("2d"); 
          
        context.beginPath(); 
        context.lineWidth = 35; 
        context.lineCap = "square"; 
        context.moveTo(50, 100); 
        context.lineTo(450, 100); 
        context.strokeStyle ="green"; 
        context.stroke(); 
    </script> 
</body> 
  
</html>

输出：

相关用法

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