Canvasで円グラフ。

html5 JavaScript

そもそも扇形が作りたかったのは、円グラフを作りたくて。
さっき作ったsector()を使って円グラフっぽくはなった。
設定したパーセントに応じて扇形を作って円になるように
並べただけなんだけど。

var canvas = d.getElementById("canvas");
var ctx = canvas.getContext('2d');
var percent = [60, 10, 20, 5, 5];
var colors = ["red", "blue", "green", "black", "orange"];
var start = 270;
var end = 270;
for (var i = 0, len = percent.length; i < len; i++) {
    ctx.beginPath();
    end += 360 * (percent[i] / 100);
    sector(ctx, 50, 50, 40, start, end);
    ctx.fillStyle = colors[i];
    ctx.fill();
    ctx.stroke();
    start = end;
}

既知の不具合（というかこの扇形の作り方だとどうにもならないか？）で
50パーセント以上の値は設定できない。
対策としてはCanvasはz軸は書いた順だからグラフをパーセントの大きい
順にソートしてから書き出せばうまいこと隠れるんだけど、、、
これじゃ汎用的じゃないよな。
いや、円グラフってパーセントが大きい順に並べるのが普通か？？