HTML canvas lineWidth用法及代码示例

HTML canvas lineWidth属性用于设置或返回线的宽度(线的厚度)。线的宽度以像素为单位设置。此属性的默认值为1。

用法:

context.lineWidth = number;

属性值：

number:该属性值指示以像素为单位指定线宽的数字。此属性忽略零，负，无穷和NaN值。

范例1：

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>  
        HTML canvas lineWidth Property 
    </title>  
</head>  
  
<body style = "text-align:center;"> 
      
    <h1 style="color:green">  
        GeeksforGeeks  
    </h1>  
      
    <h2>  
        HTML canvas lineWidth() Property  
    </h2>  
  
    <canvas id="canvas" width="350" height="380"></canvas> 
  
    <script> 
        var canv = document.getElementById("canvas"); 
        var context = canv.getContext("2d"); 
        context.beginPath(); 
        context.lineWidth = 20; 
        context.moveTo(40, 40); 
        context.lineTo(200, 150); 
        context.lineTo(40, 200); 
        context.strokeStyle = "green"; 
        context.stroke(); 
    </script> 
</body> 
  
</html>

输出：

程序2:

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>  
        HTML canvas lineWidth Property 
    </title>  
</head>  
  
<body style = "text-align:center;"> 
      
    <h1 style="color:green">  
        GeeksforGeeks  
    </h1>  
      
    <h2>  
        HTML canvas lineWidth() Property  
    </h2>  
  
    <canvas id="canvas" width="350" height="380"></canvas> 
  
    <script> 
        var canv = document.getElementById("canvas"); 
        var context = canv.getContext("2d"); 
        context.beginPath(); 
        context.lineWidth = 10; 
        context.strokeStyle ="green"; 
        context.strokeRect(110, 40, 120, 100); 
    </script> 
</body> 
  
</html>

输出：

支持的浏览器：下面列出了HTML canvas lineWidth属性支持的浏览器：

谷歌浏览器
Internet Explorer 9.0
火狐浏览器
苹果浏览器
Opera

相关用法

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