学习Canvas基础-绘制阴影

方法

shadowOffsetX 描述阴影水平偏移距离的属性。

ctx.shadowOffsetX = offset;
ctx.shadowOffsetX = offset;
offset
阴影水平偏移距离的 float 类型的值。默认值是 0。 Infinity 或者NaN都会被忽略。
注意：
将 shadowColor 属性设置成不透明，阴影才会被绘制。

shadowOffsetY 描述阴影垂直偏移距离的属性

ctx.shadowOffsetY = offset;
offset
阴影垂直偏移距离的 float 类型的值。默认值是 0。 Infinity 或者NaN 都会被忽略。
注意：
将 shadowColor 属性设置成不透明，阴影才会被绘制。

shadowColor 描述阴影颜色的属性

ctx.shadowColor = color;
color
可以转换成 CSS 值的DOMString 字符串。默认值是 fully-transparent black.
注意：
shadowColor 属性设置成不透明的，并且 shadowBlur、 shadowOffsetX 或者 shadowOffsetY 属性不为 0，阴影才会被绘制。

shadowBlur 描述模糊效果程度的属性；它既不对应像素值也不受当前转换矩阵的影响。默认值是 0。

ctx.shadowBlur = level;
ctx.shadowBlur = level;
level
描述模糊效果程度的，float 类型的值。默认值是 0。负数、 Infinity 或者 NaN 都会被忽略
注意：
只有设置 shadowColor 属性值为不透明，阴影才会被绘制。

事例

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 -->
  <canvas id="cont" width="600px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
  <script>
    //  获取canvas画布
    const canvas = document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx = canvas.getContext('2d')
    // 移动画笔位置
    ctx.moveTo(300,180)
    ctx.bezierCurveTo(350,100,500,200,300,350)
    ctx.bezierCurveTo(100,200,250,100,300,180)
    //  设置Y轴偏移量
    ctx.shadowOffsetY =4
    //  设置X轴偏移量
    ctx.shadowOffsetX =10
    //  设置模糊度
    ctx.shadowBlur = 5
    //  设置阴影颜色
    ctx.shadowColor = 'red'
     //  添加填充的颜色
     ctx.fillStyle  = 'pink'
    //  绘制填充效果
    ctx.fill()
  </script>