shadowBlur フィールド

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

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

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

canvas要素に描画するグラフィックに付く影のぼかし具合を表します。

１．構文

var shadowBlur = 0;

パラメーター

なし

２．解説

canvas要素に描画するグラフィックには影を付けることができます。この影にはガウスぼかしと呼ばれるぼかしを付けることができます。これはピントの合っていないレンズでものを映しているような効果です。shadowBlurフィールドはこのぼかしの強度を表しています。

既定値の0はぼかしがまったくない状態を表しています。このフィールドにマイナスの値や数値ではない値を設定しようとした場合無視され、値は変更されません。設定値がハードウェアの性能を超える場合、実際に適用される値は環境ごとの最大値になる場合があります。

グラフィックに影をつけるにはshadowColorフィールドを設定したうえで、shadowBlurフィールドまたはshadowOffsetXフィールドまたはshadowOffsetYフィールドに0以上の値を設定します。つまり、shadowOffsetX、shadowOffsetYが両方0の場合でもshadowBlurだけ設定して影を付けることができ、この場合視覚的にはグラフィックの背景にオーラのような光があるようになります。

描画時にshadowBlurからぼかし具体を計算する処理は変換マトリックスの影響を受けません。

３．例

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

ぼかした影の付いた長方形

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

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

//図形描画
g.strokeRect(10, 10, 50, 50);

次の例は赤いオーラのような影がついた長方形を描画します。

赤いゼロ距離の影がついた長方形

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

//影の設定
g.shadowBlur = 5;
g.shadowColor = 'red';

//図形描画
g.fillRect(10, 10, 50, 50);

次の例は美しくはありませんがぼかし具体が時間的に変化する簡単なアニメーション効果付きで文字を描画します。

実際に動作するサンプル (別ウィンドウで開きます。)

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

window.onload = function () {
    g.shadowOffsetX = 8;
    g.shadowOffsetY = -8;
    g.shadowBlur = 5;
    g.shadowColor = 'red';
    g.font = '32pt bold Meiryo'

    setInterval(refresh, 10);
}

function refresh() {
    if (g.shadowBlur > 10)
        stepValue = -stepValue;

    if (g.shadowBlur < 0.2)
        stepValue = -stepValue;

    g.shadowBlur += stepValue;
    g.clearRect(0, 0, 300, 150);
    g.fillText('影付き文字列', 10, 100);
}

４．プラットフォーム

HTML5

IE9