影に色を付ける(shadowColor) [html5 の Canvas を使ってみる：第十四回]

矩形の影に色をつけてみる。

半径 10 の円を 3 つ並べて描き、左から赤（rgb）・青（16 進数）・青（rgba で 50%）をつけてみる。

★html 側

<canvas id="shadowColor"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: shadowColor で 2 次元描画を行うことの定義
  var c = document.getElementById("shadowColor").getContext('2d');

// 1 つめの影付きの円を arc(); と shadowBlur で描画
  c.beginPath();
  c.arc(20, 20, 10, 0, 2 * Math.PI, false);
  c.shadowBlur = 5;
// 影の色を rgb で赤に設定
  c.shadowColor = "rgb(255, 0, 0)";
// これらの座標に対して線を引く指令
  c.stroke();

// 2 つめの影付きの円を arc(); と shadowBlur で描画
  c.beginPath();
  c.arc(50, 20, 10, 0, 2 * Math.PI, false);
  c.shadowBlur = 5;
// 影の色を 16 進数で青に設定
  c.shadowColor = "#0000ff";
// これらの座標に対して線を引く指令
  c.stroke();

// 3 つめの影付きの円を arc(); と shadowBlur で描画
  c.beginPath();
  c.arc(80, 20, 10, 0, 2 * Math.PI, false);
  c.shadowBlur = 5;
// 影の色を rgba で青の 50% に設定
  c.shadowColor = "rgba(0, 0, 255, .5)";
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

どうやら、Firefox と Opera ではこの shadowColor を指定すれば、shadowBlur が機能するようだ。

W3C；
4.8.11 The canvas element — HTML 5