【enchant.js】円を区切る方法【canvas】

みなさま、お久しぶりでございます。
もはや月に１回の更新があるかどうかというへなちょこブログの更新であります。
８月はコミケに9daysが２回と、ついでに言うと仕事の方でもリリースがあったりとイベント盛りだくさんの月でした。
「だから更新できなくてもしかたがないよねー」というのはただの怠慢でしかなく、かと言ってbox2dのことについてあれこれ書く気力もなく――といったところに面白いネタが飛び込んできました。
こちらの記事です。
materialize.jp » ゲーム開発をenchant.js（HTML5 + JavaScript）で！ 【ホロスコープ（Horoscope）篇】 黄道十二宮（Zodiac）を描く

黄道十二宮を描く！　中々に面白い記事ですよね。
惜しむらくは、この方法だと応用が効きにくいということです。
宮の数が倍の２４個になったら？　４８個になったら？
これらをすべて事前に計算し定数を用意しておくのは、コードが長くなりすぎて良いとはいえないと思います。
そんなわけで、for文で回して描画してみましょう。

ひとつめ。
描画座標を計算する方法です。

for (var i = 0; i < 12; i++) {
    // 外円座標を計算
    var s = 150 * Math.cos(rad*i) + 160;
    var c = 150 * Math.sin(rad*i) + 160;
    ctx.moveTo(s, c);
    // 内円座標を計算
    s = 120 * Math.cos(rad*i) + 160;
    c = 120 * Math.sin(rad*i) + 160;
    ctx.lineTo(s, c);
}

まぁスタンダードですね。

もひとつ。
こちらは描画するキャンバス自身を回転させる方法です。

ctx.save();
for (var i = 0; i < 12; i++) {
    //画像の軸を中心に変更
    ctx.translate(160,160);
    //回転
    ctx.rotate(rad);
    //軸を元に戻す
    ctx.translate(-160,-160);
    //パスの描画
    ctx.moveTo(160,40);
    ctx.lineTo(160,10);
}
ctx.restore();

ソースの全体はこちらです。

人様のふんどしだけでお茶を濁すのもアレですし、最後にひとつ。
こんな風に時計も作れたりします。