在 HTML Canvas 中，我们可以通过设置阴影属性来为绘制的图形添加阴影效果。其中，shadowOffsetY 属性用于设置阴影相对于形状在 Y 轴上的偏移量。
语法
context.shadowOffsetY = offset;
context：指定绘图的 Canvas 2D 上下文对象offset：指定阴影在 Y 轴上的偏移量，可以为正数或负数
参数
- 如果
offset为正数，表示阴影向下偏移；如果为负数，表示阴影向上偏移
示例
-- -------------------- ---- ------- --- ------ - ------------------------------------ --- --- - ------------------------ ------------- - ------ --------------- - -------- -------------- - -- ----------------- - --- ---------------- --- ---- -----
在上面的示例中，我们首先获取了 Canvas 元素和其 2D 上下文对象，然后设置了填充颜色、阴影颜色、阴影模糊度和阴影 Y 轴偏移量。最后绘制了一个红色矩形，并为其添加了向下偏移的黑色阴影。
注意事项
shadowOffsetY属性的默认值为 0，表示阴影不进行 Y 轴偏移- 阴影的偏移量会影响阴影的位置，可以通过调整
shadowOffsetY的值来改变阴影的位置
结论
通过使用 shadowOffsetY 属性，我们可以为 Canvas 中绘制的图形添加具有不同偏移量的阴影效果，从而使图形看起来更加生动和立体。在实际开发中，可以根据需求灵活运用该属性，创建出更加丰富多彩的效果。