canvas上で2点間の直線を傾きを計算して回転させるメモ

タイトルが既に訳分からないですね．
今回もjavascriptを適当に書いた初心者メモです．

あるプログラムを書いていて，canvas上の2点間を傾きを計算して，直線化したくなったので，その方法を考えました．
まだ変なこと言ってそうな気がするので，下で図を使ってやろうとしていることを書きます．

今からやろうとしていることは，ある直線的なオブジェクトがあったとして，それを2点間においての直線のように配置したいときに便利な気がします．
正確には，x軸に平行に描画される，ある直線的なオブジェクトを特定の座標に平行移動させて，別の座標に向けて（長さを調整して）回転させたいときの，その回転角度の計算をします．

例えば

こんな感じで，直線的なオブジェクトを平行移動(translate)させて，そこから回転(rotate)させて，2点あるうち，もう一方の点に傾きを合わせたい場合です．（すでに一方の点にはtranslateさせた時点で接してます）

2点間に合わせるとこんな感じになります．

これを座標から回転させる角度を計算します．
今更ですが，今回の記事は canvasだと普通の xy軸に対して，y軸が反転していることと，直線的なオブジェクトが何もしないと，x軸に平行なため，傾きの計算が面倒なので，そんな変な場合の傾きの計算方法をメモしておくために書きました．

多分，こんな計算今後しないと思いますが，一応メモ．

2点間の始点を(startx, starty)，終点を(endy, endx)と座標表記します．

 len = Math.sqrt(Math.pow(startx - endx, 2) + Math.pow(starty - endy, 2));
 w = (endy - starty) / (endx - startx);
 w = Math.atan(w);
 if(startx > endx) {
     w += Math.PI;
 }
 var canvas = document.getElementById('hoge');
 if ( ! canvas || ! canvas.getContext ) return false;
 var ctx = canvas.getContext('2d');
 ctx.save();
 ctx.translate(startx, starty);
 ctx.rotate(w);
 ctx.translate(0, -3*sx/5); // ここはいらない
 /*
     直線的なオブジェクトの描写
 */
 ctx.closePath();
 ctx.restore();

こんな感じで上図のように出来ました．
tan を計算して，それの atan を取って，始点の x座標が終点の x座標より大きい場合は，π を足すだけです．はい．
len は直線的オブジェクトの長さの値を入れてます．

今回は，直線的なオブジェクトの真ん中に始点と終点が来てほしかったので，ctx.translate(0, -3*sx/5); ってしてます．
-3*sx/5 だけ y座標をズラしてます．

終わりです．