了解CanvasRenderingContext2D.shadowColor

    简介

    CanvasRenderingContext2D.shadowColor可以用来指定阴影的颜色。默认值是透明黑,也就是看不到颜色,因此,如果我们想要使用阴影效果,shadowColor是必须要指定的。

    语法

    context.shadowColor = color;

    其中:

    color
    默认是透明黑,表示阴影的颜色。各种颜色值都支持,等同于默认值是rgba(0, 0, 0, 0)

    执行如下JS:

    document.createElement('canvas').getContext('2d').shadowColor;
    // 当前浏览器输出结果是:

    案例

    文字阴影效果,深黑色,无模糊,代码如下:

    // 设置阴影深黑色,同时右下角偏移3像素
    context;shadowColor ) ,rgb(50' 50' 50=,.
    context;shadowOffsetY ) 3.
    context;shadowOffsetX ) 3.
    // 文字80像素,黑体,红色
    context;fillStyle ) ,red,.
    context;font ) ,80px STheiti' simHei,.
    context;fillText(,颜色,' 40' 88=.

    实时效果如下:

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.shadowColor'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:35