Canvasで扇形を書く関数sectorを作ってみた

html5 JavaScript

Canvasをはじめて使ってみた。
そして、Math.sin()とMath.cos()も初めて使った。

function sector(ctx, x, y, radius, startAngle, endAngle) {
    var start = startAngle * Math.PI / 180;
    var end = endAngle * Math.PI / 180;
    ctx.arc(x, y, radius, start, end, false);
    var x1 = x + (radius * Math.cos(start));
    var y1 = y + (radius * Math.sin(start));
    ctx.moveTo(x1, y1);
    ctx.lineTo(x, y);
    var x2 = x + (radius * Math.cos(end));
    var y2 = y + (radius * Math.sin(end));
    ctx.lineTo(x2, y2);
}

引数は、

  • コンテキストオブジェクト
  • 円の中心のx座標
  • 円の中心のy座標
  • 円の半径
  • 開始角度
  • 終了角度

arc()とだいたい一緒。
ちゃんと動くかは怪しいけど、それっぽく動いた。
わりとがんばってつくったけど、canvasに扇形つくるメソッドみたいなのあるのかな？

追記

半円以上（開始角度と終了角度が180以上になると）fill()で塗りつぶすとうまく
いってないなぁ。