HTML |画布 fillStyle 属性

canvas fillStyle 属性用于设置或返回用于填充绘图的颜色、渐变或图案。

风格：

context.fillStyle=color|gradient|pattern;

适当的价值：

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

示例 1：

  

    
        HTML canvas fillStyle property
    

  

    
  
  
    
        var x = document.getElementById("GFG");
        var contex = x.getContext("2d");
        
        // set fillStyle color green.
        contex.fillStyle = "green";
        contex.fillRect(50, 50, 350, 200);
        contex.stroke();
    
  

  

输出：

示例 2：

  

    
        HTML canvas fillStyle property
    

  

    
  
  
    
        var x = 
            document.getElementById("GFG");
        var contex = 
            x.getContext("2d");
        var gr = 
            contex.createLinearGradient(50, 0, 350, 0);
        gr.addColorStop(0, "green");
        gr.addColorStop(1, "white");
        contex.fillStyle = gr;
        contex.fillRect(50, 50, 350, 200);
        contex.stroke();
    

  

输出：

示例 3：

  

    
        HTML canvas fillStyle property
    

  

    
  
  
    
        var x = 
            document.getElementById("GFG");
        
        var contex =
            x.getContext("2d");
        
        var gr =
            contex.createLinearGradient(0, 100, 0, 200);
        gr.addColorStop(0, "green");
        gr.addColorStop(1, "yellow");
        contex.fillStyle = gr;
        contex.fillRect(50, 50, 350, 200);
        contex.stroke();
    

  

输出：

支持的浏览器：

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