HTMLキャンバスshadowOffsetX属性
定義と使用方法
shadowOffsetX 属性設定または形状と影の水平距離を返します。
shadowOffsetX=0影が形状の正下方に位置していることを示しますshadowOffsetX=20影が形状のleft位置の右側20ピクセルに位置していることを示しますshadowOffsetX=-20影が形状のleft位置の左側20ピクセルに位置していることを示します
ヒント：形状から垂直方向の距離を調整するには、 shadowOffsetY 属性。
例
矩形を描画し、右に20ピクセルの影（矩形のleft位置から）:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
構文
context.shadowOffsetX=number;
属性値
| 値 | 説明 |
|---|---|
| number | 正の値または負の値、影と形状の水平距離を定義します。 |
技術的詳細
| デフォルト値： | 0 |
|---|
ブラウザのサポート
表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注釈：Internet Explorer 8 以前のバージョンは <canvas> エレメントをサポートしていません。
