影の位置を指定する(shadowOffsetX・shadowOffsetY) [html5 の Canvas を使ってみる：第十五回]

矩形に影の位置を操作みる。

前に書いた「影を付ける」の状態がこれ。



影を x 軸に 10、y 軸に 20 ずらした位置に設定する。

★html 側

<canvas id="shadowOffset"></canvas>

★Javascript 側

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

// 影付き三角形を lineTo(); と closePath(); と shadowBlur で描画
  c.beginPath();
  c.moveTo(0, 0);
  c.lineTo(100, 10);
  c.lineTo(20, 20);
  c.closePath();
  c.shadowBlur = 5;
// 影の位置を x 軸に 10 だけずらすよう定義
  c.shadowOffsetX = 10;
// 影の位置を y 軸に 10 だけずらすよう定義
  c.shadowOffsetY = 20;
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


確認環境：
Safari 5.0、Chrome 5.0.375.70

正常に動作しなかった環境：
Firefox 3.6.3、Opera 10.53
ただし、Firefox と Opera 10.53 は shadowColor を指定すれば有効になる。

W3C；
4.8.11 The canvas element — HTML 5