サイト内検索

shadowOffsetY プロパティ

構文

context . shadowOffsetX [ = value ]
context . shadowOffsetY [ = value ]

現在の影のオフセットを返します。

値をセットして、影のオフセットを変更することができます。有限数でない値は無視されます。

仕様

shadowOffsetXshadowOffsetY 属性は、それぞれ、影が、正の水平方向、正の垂直方向のオフセットとなる距離を指定します。これらの値は座標空間の単位となります。これらは、現在の現在の変形マトリックスの影響を受けません。

コンテキストが生成されるとき、この影のオフセットの属性の値は 0 で初期化されなければいけません。

取得時には、これらの属性は、現在の値を返さなければいけません。セット時には、これらの属性は新しい値にセットされますが、その値が無限第や NaN の場合は除外され、その場合は、その値は無視されなければいけません。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-shadowoffsety

サンプル

shadowOffsetYプロパティのサンプル

このサンプルは、shadowBlur 属性に 10 を、そして shadowOffsetY 属性に 10 をセットしたうえで、赤色の円を描いてきました。10 の幅の円のシャドーが下方向に 10 だけ移動した状態でレンダリングされます。

/* ぼかしの範囲を定義 */
ctx.shadowBlur = 10;
/* ぼかしのオフセット(垂直方向)を定義 */
ctx.shadowOffsetY = 10;
/* 円を塗る */
ctx.beginPath();
ctx.arc(50, 50, 35, 0, Math.PI*2, false);
ctx.fillStyle = "#cc0000";
ctx.fill();

[shadowOffsetY プロパティの実際のサンプル]

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 × 2 ○ 1 × 9.2 × 9 ○ 0002 ×
3 × 3 ○ 2 ○ 9.5 ×   3 ×
3.5 ○ 4 ○ 3 ○ 10 ×    
3.6 ○ 5 ○ 6 ○ 10.60 ○    

shadowOffsetY をサポートしているブラウザは Safari と Chome 2, 3 のみです。それ以外のブラウザでは、shadowOffsetY に値をセットしても無視されます。

なお、Safari と Chrome 2, 3 では、shadowColor をセットしない場合は自動的に黒がセットされますが、Firefox 3.5 の場合は、事前に shadowColor を明示的にセットしておかないと、シャドーが表示されません。