HTML |画布 shadowColor 属性

Canvas shadowColor属性用于设置或返回用于阴影的颜色。 fillStyle 属性用于创建阴影。此属性可以设置为表示 CSS 颜色值的字符串，我们希望将其作为阴影颜色。
默认情况下，阴影颜色设置为黑色（CSS 颜色值 #000000）。

语法: :

context.shadowColor = color;

参数：：
color ：这个参数表示一个 css 颜色值，它被用作绘图的阴影颜色。

shadowColor属性与shadowBlur属性一起创建阴影。阴影的调整也可以通过使用shadowOffsetX和shadowOffsetY属性来完成。

context.shadowOffsetX ：这表示阴影的 x 偏移量。它可以是积极的或消极的。
context.shadowOffsetY ：这表示阴影的 y 偏移量。它可以是积极的或消极的。
context.shadowBlur ：这表示阴影的模糊过滤器扩散。数字越大，扩散越多。

示例 1：

  

    
  
    
        var canvas = 
            document.getElementById('myCanvas');
        
        var context = canvas.getContext('2d');
        context.font = "35px Helvetica";
        context.shadowOffsetX = 3;
        context.shadowOffsetY = 3;
        context.fillText("GeeksforGeeks", 190, 100);
  
        context.shadowColor = "rgba(0, 0, 0, 0.5)";
        context.fillText("GeeksforGeeks", 190, 160);
  
        context.shadowBlur = 1;
        context.fillText("GeeksforGeeks", 190, 220);
    

  

输出：

示例 2：

  

  
    
  
  
    
        var c = 
            document.getElementById("myCanvas");
        
        var ctx = c.getContext("2d");
        ctx.shadowBlur = 20;
        ctx.fillStyle = "green";
  
        ctx.shadowColor = "yellow";
        ctx.fillRect(20, 20, 100, 80);
  
        ctx.shadowColor = "blue";
        ctx.fillRect(140, 20, 100, 80);
    

  

输出：

支持的浏览器：

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