2013年1月14日
グラフの描画範囲、つまり、X軸とY軸の最小値と最大値は、これまでスクリプト内で設定していたが、今回は、ウェブページからX軸のスケールを可変できるように工夫した。グラフの描画範囲(スケール)を変え、どの範囲に注目するかで、グラフは違った印象になる。
X*SIN(1/X)
※外部ファイル(graphSheet.js)：前記事「note007:グラフシートの外部ファイル化」を参照
<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 = -1;
Xmax = 1;
Ymin = -1.25;
Ymax = 1.25;
maxWidth = canvas.width; // Canvasの大きさはHTMLで指定する
maxHeight = canvas.height;
graphSheet(Xmin, Xmax, Ymin, Ymax); // グラフの元になるシートを作成
Sinwave();
}
// グラフ範囲を拡大(▲)
function scaleUp(){
if(Xmax < 1){
Xmin -= 0.1;
Xmax += 0.1;
} else {
Xmin -= 1;
Xmax += 1;
}
Xmax = Math.round(Xmax * 10)/10;
if(Xmax > 10){
Xmin = -10;
Xmax = 10;
}
document.getElementById("result").value = Xmax;
graphSheet(Xmin, Xmax, Ymin, Ymax);
Sinwave();
}
// グラフ範囲を縮小(▼)
function scaleDown(){
if(Xmax <= 1){
Xmin += 0.1;
Xmax -= 0.1;
} else {
Xmin += 1;
Xmax -= 1;
}
Xmax = Math.round(Xmax * 10)/10;
if(Xmax < 0.1){
Xmin = -0.1;
Xmax = 0.1;
}
document.getElementById("result").value = Xmax;
graphSheet(Xmin, Xmax, Ymin, Ymax);
Sinwave();
}
// X*SIN(1/X)のグラフを描く
function Sinwave(){
var addX = (Math.abs(Xmin) + Math.abs(Xmax))/maxWidth;
var X1 = Xmin * scaleX + offsetX;
var Y1 = Xmin * Math.sin(1/Xmin) * -1 * scaleY + offsetY;
ctx.strokeStyle = "Black";
ctx.lineWidth = 1;
for(i=Xmin; i<Xmax; i+=addX){
var X2 = i * scaleX + offsetX;
var Y2 = i * Math.sin(1/i) * -1 * scaleY + offsetY;
ctx.beginPath();
ctx.moveTo(X1, Y1);
ctx.lineTo(X2, Y2);
ctx.stroke();
X1 = X2;
Y1 = Y2;
}
}
</script>
<form name="myFORM"> グラフのX軸範囲 ± <input type="text" size="2" id="result" value="1"> <input type="button" value=" ▲ " onclick="scaleUp()"> <input type="button" value=" ▼ " onclick="scaleDown()"> </form>