HTML | 画布 shadowOffsetX 属性

简介

HTML 的画布（Canvas）元素用于进行基于 web 的图形绘制。shadowOffsetX 属性是其样式属性之一，它指定了阴影在 x 轴方向偏移的距离。

语法

<canvas id="myCanvas"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.shadowOffsetX = offset;
</script>

属性值

shadowOffsetX 的属性值可以是任何整数值。正数表示阴影向右偏移，负数表示阴影向左偏移。

示例

下面是一个简单的 Canvas 阴影绘制示例。我们使用 shadowOffsetX 属性指定阴影向右偏移 5 个像素。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#f00";
    ctx.shadowColor = "#000";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 5;
    ctx.fillRect(50, 50, 100, 100);
</script>

效果如下：

注意事项

• shadowOffsetX 属性必须在设置了 shadowColor 和 shadowBlur 属性后使用，不然无法实现阴影效果。
• 该属性只能设置 x 轴方向的阴影偏移，如果需要设置 y 轴方向的偏移，可以使用 shadowOffsetY 属性。