HTML | 画布 shadowOffsetY 属性

shadowOffsetY 属性用于设置或检索 HTML 画布上阴影的垂直偏移量。当我们在画布上绘制带有阴影效果的对象时，shadowOffsetY 属性可以帮助我们控制阴影的垂直位置。

语法

<canvas id="myCanvas"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.shadowOffsetY = offset;
</script>

属性值

offset：一个表示垂直偏移量的数字值，可正可负。默认值为 0。

示例

为了更好地理解 shadowOffsetY 属性的作用，我们可以通过一个示例来展示它的使用：

<canvas id="myCanvas"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = 'red';

  // 设置阴影样式
  ctx.shadowColor = 'black';
  ctx.shadowBlur = 10;
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;

  // 绘制带阴影的矩形
  ctx.fillRect(50, 50, 200, 100);
</script>

在上面的示例中，我们使用 shadowOffsetY 属性将阴影位置向下偏移了 5 像素。这将使阴影在垂直方向上比对象本身稍微偏下。

注意事项

• shadowOffsetY 属性必须与 shadowColor、shadowBlur 和 shadowOffsetX 属性一起使用才能看到阴影效果。
• 如果没有设置 shadowOffsetY 属性，则阴影默认不偏移。

通过使用 shadowOffsetY 属性，我们可以控制画布上阴影的垂直位置，为绘制的对象增添更加逼真和立体的效果。