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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。