shadowOffsetX フィールド

この記事が対象とする仕様

	HTML5 HTML構文	◎	対象です。
	HTML5 XHTML構文	◎	対象です。

出典：HTML Canvas 2D Context 2012年3月7日 Editor's Draft版 http://dev.w3.org/html5/2dcontext/

canvas要素に描画するグラフィックとそのグラフィックに付く影の横方向のずれの距離を表します。

１．構文

var shadowOffsetX = 0;

パラメーター

なし

２．解説

canvas要素に描画するグラフィックには影を付けることができます。shadowOffsetXはグラフィックと影の横方向の距離を表します。数値と解釈できない値を設定しようとした場合無視され、値は変更されません。

グラフィックに影をつけるにはshadowColorフィールドを設定したうえで、shadowBlurフィールドまたはshadowOffsetXフィールドまたはshadowOffsetYフィールドに0以上の値を設定します。

shadowOffsetXフィールドおよびshadowOffsetYフィールドによる影の位置を本体のグラフィックスの位置から決定する処理は変換マトリックスの影響を受けません。たとえば、shadowOffsetXフィールドの値が50の場合、scale(2, 1)の呼び出しがあってもなくてもグラフィックの右50の位置に影が描画されます。

３．例

次の例はcanvas要素に影の付いた2つの長方形を描画します。

影付き長方形

var canvas1 = document.getElementById('Canvas1');
var g = canvas1.getContext('2d');

//影の設定
g.shadowOffsetX = 8;
g.shadowOffsetY = 6;
g.shadowColor = 'black';

//図形描画
g.fillStyle = 'red';
g.fillRect(10, 10, 50, 50);

g.fillStyle = 'blue';
g.fillRect(70, 10, 20, 60);

次の例は影をぼやけた影がついた影付き文字列を描画します。

影付き文字列

var canvas1 = document.getElementById('Canvas1');
var g = canvas1.getContext('2d');

//影の設定
g.shadowOffsetX = 14;
g.shadowOffsetY = -10;
g.shadowColor = '#666666';
g.shadowBlur = 5;

//文字の設定
g.fillStyle = 'red';
g.font = '32pt bold Meiryo'
g.fillText('影付き文字列', 10, 100);

４．プラットフォーム

HTML5

IE9