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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。