■補講　Canvasに楕円を描く
　本書の7章のCanvasではいくつかの描画メソッドについて解説しました。他にもCanvasには描画関係のメソッドがありますが、多角形を描くメソッドや楕円を描くメソッドなどはありません。基本的にはパスを組み合わせれば、どんな図形でも描けるという考え方です。
　この補習講義ではCanvasに標準で用意されていない楕円を描いてみます。


------------------------------------------------------------------------------------------------
■楕円の前に正円
　楕円の前にまず、正円を描いてみましょう。Canvasには円を描くarc()メソッドがありますが、ここでは座標点を計算して、その座標点をパスで結んでいくことで円を描いてみましょう。
　円周上の座標点は以下のようにして求めることができます。

x = cos(θ)
y = sin(θ)

　ただし、これだと半径1の円しか描くことができませんから以下のようにして半径を乗算します。

x = 半径　×　cos(θ)
y = 半径　×　sin(θ)

　この計算式を使って描くプログラムが以下のものになります。実行するとCanvasに赤い円が描画されます。


------------------------------------------------------------------------------------------------
■円を描くプログラム
------------------------------------------------------------------------------------------------
window.addEventListener("load", function(){
	var canvasObj = document.getElementsByTagName("canvas")[0];
	var context = canvasObj.getContext("2d");
	if (!context){ return; }
	context.strokeStyle = "red";
	context.fillStyle = "black";
	context.fillRect(0,0,640,480);
	context.translate(320,240);	// 中央に移動
	context.beginPath();
	var r = 100;	// 半径
	for(var d=0; d<360; d++){
		var rad = d * Math.PI / 180;
		var x = r * Math.cos(rad);
		var y = r * Math.sin(rad);
		if (d==0){
			context.moveTo(x, y);
		}else{
			context.lineTo(x,y);
		}
	}
	context.closePath();
	context.stroke();
}, true);
------------------------------------------------------------------------------------------------


------------------------------------------------------------------------------------------------
■楕円ならどうなる？
　それでは楕円の場合を見てみましょう。楕円は横方向と縦方向の半径が異なるものです。正円なら横と縦の半径が同じということになります（正円は楕円の特殊なパターンと考えることもできます）。
　楕円の場合は横と縦の半径が別々ですから以下のように別々の半径を乗算すればよいことになります。

x = 横の半径　×　cos(θ)
y = 縦の半径　×　sin(θ)

　この計算式を使って描くプログラムが以下のものになります。実行するとCanvasに赤い楕円が描画されます。



------------------------------------------------------------------------------------------------
■楕円を描くプログラム
------------------------------------------------------------------------------------------------
window.addEventListener("load", function(){
	var canvasObj = document.getElementsByTagName("canvas")[0];
	var context = canvasObj.getContext("2d");
	if (!context){ return; }
	context.strokeStyle = "red";
	context.fillStyle = "black";
	context.fillRect(0,0,640,480);
	context.translate(320,240);	// 中央に移動
	context.beginPath();
	var rx = 200;	// 横の半径
	var ry = 100;	// 縦半径
	for(var d=0; d<360; d++){
		var rad = d * Math.PI / 180;
		var x = rx * Math.cos(rad);
		var y = ry * Math.sin(rad);
		if (d==0){
			context.moveTo(x, y);
		}else{
			context.lineTo(x,y);
		}
	}
	context.closePath();
	context.stroke();
}, true);
------------------------------------------------------------------------------------------------


------------------------------------------------------------------------------------------------
■円を描くプログラムを応用して多角形を描く
　正円／楕円のプログラムを応用するとCanvasではサポートされていない多角形を描く事ができます。多角形の場合は円周上の座標点を少なくすればできあがりです。円周上の点が5つなら五角形、12なら20角形になります。円周上の点が無限にあれば円という考え方もできます。ちなみに1980年代のパソコンでは64角形を描くことで擬似的に円を描画している機種もありました。

　実際のプログラムが以下のものになります。ここで描く多角形を指定しているのが以下の行です。ここの6の数値を変更して、いろいろ試してみてください。

var p = 6;	// 多角形

　また、昔のパソコンで使われていたDDA（デジタル微分解析）を使って整数計算だけで円を描く方法もあるので興味ある方は検索して調べてみるのもよいでしょう。



------------------------------------------------------------------------------------------------
■楕円を描くプログラム
------------------------------------------------------------------------------------------------

window.addEventListener("load", function(){
	var canvasObj = document.getElementsByTagName("canvas")[0];
	var context = canvasObj.getContext("2d");
	if (!context){ return; }
	context.strokeStyle = "red";
	context.fillStyle = "black";
	context.fillRect(0,0,640,480);
	context.translate(320,240);	// 中央に移動
	context.beginPath();
	var p = 6;	// 多角形
	var r = 100;	// 縦半径
	for(var d=0; d<360; d+=(360/p)){
		var rad = d * Math.PI / 180;
		var x = r * Math.cos(rad);
		var y = r * Math.sin(rad);
		if (d==0){
			context.moveTo(x, y);
		}else{
			context.lineTo(x,y);
		}
	}
	context.closePath();
	context.stroke();
}, true);
------------------------------------------------------------------------------------------------