HTML canvas strokeStyle用法及代碼示例

canvas strokeStyle屬性用於設置或返回圖形中使用的顏色，漸變或圖案的筆觸。

用法:

context.strokeStyle=color|gradient|pattern;

屬性值：

color:用於設置圖形的填充顏色。 canvas fillStyle屬性的默認值為black。
gradient:用於設置漸變對象以填充圖形。漸變對象是線性或徑向的。
pattern:用於設置圖案以填充圖形。

範例1：本示例使用canvas strokeStyle屬性將描邊顏色設置為綠色。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas strokeStyle property 
    </title> 
</head> 
  
<body> 
    <canvas id="GFG" width="500" height="300"></canvas> 
      
    <!-- Script to uses canvas strokeStyle property -->
    <script> 
        var x = document.getElementById("GFG"); 
        var contex = x.getContext("2d"); 
          
        // Create rectangle 
        contex.rect(50, 50, 350, 200); 
          
        // Set stroke color 
        contex.strokeStyle = "green"; 
          
        // Set stroke width 
        contex.lineWidth = "10"; 
          
        contex.stroke(); 
    </script>  
</body> 
  
</html>

輸出：

範例2：本示例使用canvas strokeStyle屬性使用線性漸變設置描邊顏色。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas strokeStyle property 
    </title> 
</head> 
  
<body> 
    <canvas id="GFG" width="500" height="300"></canvas> 
      
    <!-- Script to uses canvas strokeStyle property -->    
    <script> 
        var x = document.getElementById("GFG"); 
        var contex = x.getContext("2d"); 
          
        // Create linear gradient 
        var gr = contex.createLinearGradient(0, 0, 350, 200); 
          
        // Set color and position in a gradient object 
        gr.addColorStop("0", "green"); 
        gr.addColorStop("0.7", "yellow"); 
        gr.addColorStop("1.0", "blue"); 
          
        // Set stroke style to gradient 
        contex.strokeStyle = gr; 
          
        // Set line width 
        contex.lineWidth = 5; 
          
        // Create rectangle 
        contex.rect(50, 50, 350, 200); 
          
        contex.stroke(); 
    </script>  
</body> 
  
</html>

輸出：

支持的瀏覽器：canvas strokeStyle屬性支持的瀏覽器如下：

穀歌瀏覽器
Internet Explorer 9.0
火狐瀏覽器
蘋果瀏覽器
Opera

相關用法

注：本文由純淨天空篩選整理自R_Raj大神的英文原創作品 HTML | canvas strokeStyle Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。