扇形を作る(moveTo+arc+closePath) [html5 の Canvas を使ってみる：第四回]

次はなににしようかと思ってて、arc(); では円を描くをやったが、扇形はどうすれば描けるのか、と。検索結果を見ても、どうもそれらしきメソッドはないように見える。

ということで、扇形を作る function を作ってみた。moveTo(); と arc(); と closePath(); を使って描ける。

中心座標が x:70、y:70 で、半径が 50、水平から 60°上にずれた傾きを持ち、角度が 90°の扇形を描く。

/* 2009/12/19 edit */
第七回と第八回で色を塗ることもやったので、色を塗る処理も追加してみた。

★html 側

<canvas id="fan"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 上記を描画する function をコールする
// 引数：中心 x、中心 y、半径、傾き、角度、線の色、塗る色、大小、対象
  fan(70, 70, 50, -135, 90, "rgb(0, 0, 255)", "rgba(0, 0, 255, .5)", true, c);
}
function fan(x, y, radius, tilt, angle, strokeColor, fillColor, bool, target) {
// 筆おろしの座標を定義
  target.moveTo(x, y);
// arc の startAngle と endAngle はラジアンを使うので、
// 円周率に角度を乗算し、180 で除算する。
// プラス値だと下向きになり、なんか不自然なのでマイナス値。
// endAngle は傾きと角度を加えないとうまく描画されない。
  target.arc(x, y, radius, -(tilt * Math.PI / 180), -((tilt + angle) * Math.PI / 180), bool);
// 弧を閉じる
  target.closePath();
// 線の色をつける
  target.strokeStyle = strokeColor;
// 内部の色を塗る
  target.fillStyle = fillColor;
// 塗る指令
  target.fill();
// これらの座標に対して線を引く指令
  target.stroke();
}

すると、こうなる。


bool 値を false にすると、指定した扇形を抜いた形になる。

  fan(70, 70, 50, 60, 90, false, c);

傾きを 20°にし、角度を 140°にすると、こうなる。

  fan(70, 70, 50, 20, 140, true, c);

下向きするには、傾きを水平からのマイナス値を入れる。

  fan(70, 70, 50, -120, 60, true, c);

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