2011-11-06

Canvasで三角関数を使わずに何とかする方法

JavaScriptでHTML5 Canvasを使っていて、円周上に点を書いてみたり、任意の角度で線を引きたい場合など、三角関数によってr, θからx, y座標を求めたくなる状況があると思います。

APIをよく見ると、三角関数は使わなくても、平行移動(translate), 回転(rotate)の座標変換を行えば、先のほとんどの状況で何とかなり、コードが大変すっきりします。

座標変換なんて事をすると元の座標系に戻れないんじゃないかと大変不安になられるかと思いますが、いったん状態をsaveした後、restoreすることで戻すことができるので気兼ねなくやってよいです。

参考
MDN - Canvas チュートリアル > 変形
HTML5 Clock - この時計アプリは三角関数を使用していません。