HTML canvas shadowOffsetY 属性

在 HTML Canvas 中，我们可以通过设置阴影属性来为绘制的图形添加阴影效果。其中，shadowOffsetY 属性用于设置阴影相对于形状在 Y 轴上的偏移量。

语法

context.shadowOffsetY = offset;

• context：指定绘图的 Canvas 2D 上下文对象
• offset：指定阴影在 Y 轴上的偏移量，可以为正数或负数

参数

• 如果 offset 为正数，表示阴影向下偏移；如果为负数，表示阴影向上偏移

示例

// www.javascriptcn.com code example
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.shadowColor = 'black';
ctx.shadowBlur = 5;
ctx.shadowOffsetY = 10;

ctx.fillRect(50, 50, 100, 100);

在上面的示例中，我们首先获取了 Canvas 元素和其 2D 上下文对象，然后设置了填充颜色、阴影颜色、阴影模糊度和阴影 Y 轴偏移量。最后绘制了一个红色矩形，并为其添加了向下偏移的黑色阴影。

注意事项

• shadowOffsetY 属性的默认值为 0，表示阴影不进行 Y 轴偏移
• 阴影的偏移量会影响阴影的位置，可以通过调整 shadowOffsetY 的值来改变阴影的位置

结论

通过使用 shadowOffsetY 属性，我们可以为 Canvas 中绘制的图形添加具有不同偏移量的阴影效果，从而使图形看起来更加生动和立体。在实际开发中，可以根据需求灵活运用该属性，创建出更加丰富多彩的效果。