ガスコン研究所

note007:グラフシートの外部ファイル化

2013年1月14日

　今回の目的は、前記事で作成した、グラフの目盛などを描く基本部分を外部ファイル化すること。前記事のgraphSheet()をコピー、「graphSheet.js」という名前で保存し、headタグ内に読み込む外部スクリプトファイルとして指定する。これで、グラフシートを流用して、いろいろなグラフが描けるはずだ。試しにSIN関数（サインカーブ）と、COS関数（コサインカーブ）を描いてみた。

－SIN θ　　　－COS θ

　JavaScriptファイルをheadタグ内に記述するのと、外部ファイルとして読み込むことに大きな違いはない。あっけないほど簡単に実現できてしまった。注意すべき点があるとすれば、グローバル変数とローカル変数を意識することだろう。爺の勘違いかもしれないが、JavaScriptでは、関数内で「var」で変数を定義すると、ローカル変数になり、逆に「var」を使わなければ、他の関数からも参照できるグローバル変数になるみたい。当然、いろんなJavaScriptの外部ファイルを読み込むと、変数名のコリジョン（衝突）のリスクが発生する。もしかしたら、使用する変数を関数内に閉じ込め、なおかつ変数を受け渡しする、うまい方法があるのかもしれないが、今の爺のレベルではない＞＜；

■外部ファイルの読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>グラフシートの外部ファイル化</title>
	<script type="text/javascript" src="graphSheet.js"></script>
</head>

※爺註：HTML5では「script type」を指定する必要はないけど、いちおう明示するってことで＾＾；

■JavaScript

<script type="text/javascript">
window.onload = function(){		// HTMLを読み込んだら実行するというお約束
	// Canvas使用の手続き（お約束）
	var canvas = document.getElementById('myGraph');
	if (! canvas || ! canvas.getContext){return false;}
	ctx = canvas.getContext('2d');
	// 描画するグラフに合わせて、X軸、Y軸の最小値と最大値を設定する
	Xmin = -30;
	Xmax = 370;
	Ymin = -1.3;
	Ymax = 1.3;
	maxWidth = canvas.width;	// Canvasの大きさはHTMLで指定する
	maxHeight = canvas.height;
	graphSheet(Xmin, Xmax, Ymin, Ymax);	// グラフシートを呼び出す
	Sinwave();	// サイン関数
	Cosinwave();	// コサイン関数
}
// SIN(サインウェーブ)を描く
function Sinwave(){
	var addX = (Math.abs(Xmin) + Math.abs(Xmax))/maxWidth;
	var X1 = Xmin * scaleX + offsetX;
	var Rad = (Math.PI / 180) * Xmin;
	var Y1 = Math.sin(Rad) * -1 * scaleY + offsetY;
	ctx.strokeStyle = "Red";
	ctx.lineWidth = 1;
	for(i=Xmin; i<Xmax; i+=addX){
		var X2 = i * scaleX + offsetX;
		Rad = (Math.PI / 180) * i;
		var Y2 = Math.sin(Rad) * -1 * scaleY + offsetY;
		ctx.beginPath();
		ctx.moveTo(X1, Y1);
		ctx.lineTo(X2, Y2);
		ctx.stroke();
		X1 = X2;
		Y1 = Y2;
	}
}
// COS(コサインウェーブ)を描く
function Cosinwave(){
	var addX = (Math.abs(Xmin) + Math.abs(Xmax))/maxWidth;
	var X1 = Xmin * scaleX + offsetX;
	var Rad = (Math.PI / 180) * Xmin;
	var Y1 = Math.cos(Rad) * -1 * scaleY + offsetY;
	ctx.strokeStyle = "Blue";
	ctx.lineWidth = 1;
	for(i=Xmin; i<Xmax; i+=addX){
		var X2 = i * scaleX + offsetX;
		Rad = (Math.PI / 180) * i;
		var Y2 = Math.cos(Rad) * -1 * scaleY + offsetY;
		ctx.beginPath();
		ctx.moveTo(X1, Y1);
		ctx.lineTo(X2, Y2);
		ctx.stroke();
		X1 = X2;
		Y1 = Y2;
	}
}
</script>