Canvas 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> 元素をサポートしていません。