HTML |画布 strokeStyle 属性

canvas strokeStyle 属性用于设置或返回绘图中使用的颜色、渐变或图案的笔触。

句法：

context.strokeStyle=color|gradient|pattern;

适当的价值：

• color：用于设置绘图的填充颜色。 canvas fillStyle 属性的默认值为黑色。
• 渐变：用于设置渐变对象以填充绘图。渐变对象是线性的或径向的。
• pattern：用于设置填充图形的图案。

示例 1：此示例使用画布 strokeStyle 属性将笔触颜色设置为绿色。

  

    
        HTML canvas strokeStyle property
    

  

    
      
    
    
        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();
     

  
                    

输出：

示例 2：此示例使用画布 strokeStyle 属性使用线性渐变设置笔触颜色。

  

    
        HTML canvas strokeStyle property
    

  

    
      
        
    
        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();
     

  
                    

输出：

支持的浏览器： canvas strokeStyle 属性支持的浏览器如下：

• 谷歌浏览器
• 浏览器 9.0
• 火狐
• 苹果浏览器
• 歌剧