サイト内検索

shadowBlur プロパティ

構文

context . shadowBlur [ = value ]

影に適用する「ぼかし」のレベルを返します。

値をセットして、ぼかしレベルを変更することができます。0 以上の有限数でない値は無視されます。

仕様

shadowBlur 属性には、ぼかし効果のサイズを指定します。(この単位は座標空間の単位に対応しません。現在の変形マトリックスの影響を受けません。)

コンテキストが生成されるとき、shadowBlur 属性は 0 で初期化されなければいけません。

取得時には、この属性は、その現在の値を返さなければいけません。セット時には、この属性は新しい値にセットされなければいけません。ただし、その値が負数や無限大や NaN の場合はセットされず、無視されなければいけません。


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

サンプル

shadowBlurプロパティのサンプル

このサンプルは、shadowBlur 属性に 10 をセットしたうえで、赤色の円を描いてきました。描いた図形の周りに、shadowBlur 属性にセットした幅に、ぼかしがレンダリングされます。

/* ぼかしの範囲を定義 */
ctx.shadowBlur = 10;
/* ぼかしの色を定義 */
ctx.shadowColor = "#000000";
/* 円を塗る */
ctx.beginPath();
ctx.arc(50, 50, 35, 0, Math.PI*2, false);
ctx.fillStyle = "#cc0000";
ctx.fill();

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

ブラウザ対応状況

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 ○