サイト内検索

shadowColor プロパティ

構文

context . shadowColor [ = value ]

現在の影の色を返します。

値をセットして、影の色を変更することができます。CSS 色として構文解析できない値は無視されます。

仕様

shadowColor 属性には、影の色をセットします。

コンテキストが生成されるとき、shadowColor 属性は、完全に透明な黒で初期化されなければいけません。

取得時には、 色のシリアライゼーションが返されなければいけません。

セット時には、新しい値が CSS <color> 値として構文解析され、その色が割り当てられなければいけません。その値が妥当な色でなければ、無視され、その属性は以前の値のままとならなければいけません。[CSSCOLOR]


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

サンプル

shadowColorプロパティのサンプル

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

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

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

ブラウザ対応状況

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 ○