HTML canvas shadowOffsetX プロパティ

例

右 20 ピクセル（矩形の左辺の位置から）に配置した影を持つ四角形を描きます：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、プロパティを完全にサポートした最初のブラウザ・バージョンを指定しています。

プロパティ
shadowOffsetX	Yes	9.0	Yes	Yes	Yes

定義と用法

shadowOffsetX プロパティは、図形からの影の横方向の距離を設定または返します。

shadowOffsetX=0 は、影が図形の真後ろにあることを示します。

shadowOffsetX=20 は、影が（図形の左の位置から）右に 20 ピクセルから始まることを示します。

shadowOffsetX=-20 は、影が（図形の左の位置から）左に 20 ピクセルから始まることを示します。

チップ: 図形から影の縦方向の距離を調整するには、shadowOffsetY プロパティを使用します。

デフォルト値：	0
JavaScript 構文：	context.shadowOffsetX=number;

プロパティの値

値	説明	Play it
number	図形からの影の横方向の距離を定義する正または負の数値	Play it ❯

HTML Canvas リファレンス