Canvas に JavaScript で 楕円を描く サイン・コサイン関数

ここはひとつ Excel の手法にヒントがあるに違いないと見込んで探し求めたところ

酒井恒[さかい・ひさし]／著『Excel でわかる数学の基礎 〔新版〕』

という本の（42～44ページに）「5.1 楕円曲線」とあり

　［引用開始］

　Excel で、a＝3, b＝2のときの楕円を描くには、次のように行います。
　まずＡ列に t を 0 から 6.3（約２π）まで 0.3 ごとに入れます。次に B2 セルに ＝3*SIN(A2) を、C2 セルに ＝2*COS(A2) の数式を入れます。

　そして B2 と C2 セルを同時に選択し、オートフィルで t＝6.3 まで計算させます。

　x と y のセル（つまりＢ列とＣ列）のみを選択してグラフを描けば、次のような曲線が得られます。

　［引用終了 ： 図は省略］

ということでした――

数値の意味は、次の通りです。

a＝3 は、長径。
b＝2 は、短径。
t は、ラジアン（ラジアン＝角度/180×π）。

　パソコンの関数には、角度をラジアンで指定するようになっているようです。
　πラジアンが、180 度になる模様です。
　２πラジアンが、360 度になるので、2 × 3.14 ＝ 6.28 で、約 6.3 ラジアンが、360 度というわけです。
　これを、0.3 ラジアンごとに計算するという手法なのですが、今回は、0.1 ラジアンごとに計算しました。
　360 ÷ 63 ≒ 5.7
　つまり、5.7 度ごとに角度をかえて軌跡をペンでなぞるわけです。

今回チャレンジしたのは、キャンバス上でマウスの左ボタンを押して描かれた
その始点と終点を対角線とする長方形内にぴったりと楕円を描くという JavaScript です。

var x_s = MouseDown の x 座標;
var y_s = MouseDown の y 座標;

var x_e = MouseUp の x 座標;
var y_e = MouseUp の y 座標;

var x_m = MouseMove している間の x 軸変化数;
var y_m = MouseMove している間の y 軸変化数;

x_m = x_e - x_s;
y_m = y_e - y_s;
mPen.beginPath();
mPen.lineWidth = 1;
mPen.strokeStyle = '#000';
mPen.moveTo(x_s + x_m/2 + Math.round(x_m/2*Math.sin(0)), y_s + y_m/2 + Math.round(y_m/2*Math.cos(0)));
for(var i=1;i<=63;i++){
mPen.lineTo(x_s + x_m/2 + Math.round(x_m/2*Math.sin(i/10)), y_s + y_m/2 + Math.round(y_m/2*Math.cos(i/10)));
}
mPen.stroke();

１.　位置変化情報を計算したら、角度 0 の位置にペンを移動させる
２.　1 から 63 まで計算された軌跡をペンでなぞる
３.　その軌跡をペンで描く

　たったの　実質３行で　完結です。

　上に書いた Script 部分は、線の太さと色以外は、すべてそのまんまコピペしたものです。
　結果は、いつものサイトで確認できます。

　「ツールボックス」を開いて「図形の種類」から選んでください。
　「幾何図形」ボタンに（x, y）の開始座標が出ます。
　その、「幾何図形」ボタンをクリックすると、「自由描線」モードに戻ります。

Canvas MouseMove改 Ex

http://theendoftakechan.web.fc2.com/JavaScript/mousemoveKaiEx.html