TECHNICAL INFORMATION技術情報
- ホーム
- 技術情報
- 一番簡単な JavaScript
- 第9回（応用編-1）「図形・グラフを書く」
第9回（応用編-1）
図形・グラフを書く
図形・グラフを書く
前回の、第8回までの内容で、JavaScript を使って計算などするプログラムを作るための、基礎的なことは大体済んだと思います。そこで今回からは、応用編ということにして、前回までの例には出てこなかった応用例を書いていこうと思います。
図形を書いてみる
HTML のタグで記述しても、JavaScript を使っても、画像を表示することはできます。しかし、元の画像ファイルから大きさなどは変更できますが、自由な形の図形を書くことができるわけではありません。JavaScript
で、計算式を使うと、元の画像ファイルとは違った形の図形もある程度は書くことができます。
元になる図形は、幅・高さともに1ピクセルで、透明：img001.gif、白：img002.gif、赤：img003.gif、青：img004.gif
の4ファイルを用意しました。
● 四角形
単純な四角形は、元の図形の幅と高さを指定するだけですので、フォームで四角形の色と大きさを指定し、表示することにしました。ここをクリックしてください。<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function disp()
{
var data,datb,datc;
with(document.form01)
{
data=eval(txt01.value);
datb=eval(txt02.value);
if(r01[0].checked)
datc="<img src='img003.gif' width='";
else
datc="<img src='img004.gif' width='";
}
document.write(datc+data+"' height='"+datb+"'>");
document.close();
}
</script>
</head>
<body>
<form name="form01">
■四角形の色<br>
<input type="radio" name="r01" checked>赤
<input type="radio" name="r01">青<p>
■四角形の大きさ<br>
幅：<input type="text" name="txt01">
高さ：<input type="text" name="txt02"><p><hr>
<input type="button" value="表示" onclick="disp()"><p>
</form>
</body>
</html>
● 円形
円形の場合は、元の図形の形状（幅と高さが1ピクセルでも四角形）と違いますので、表示するのは少し面倒です。ここでは、高さ1ピクセルで一行ずつ書いていくことにしました。ここをクリックしてください。<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function disp()
{
var rad,data,datb,datc,y;
with(document.form01)
{
rad=eval(txt01.value);
data=Math.pow(rad,2);
if(r01[0].checked)
datc="<img src='img003.gif' width='";
else
datc="<img src='img004.gif' width='";
}
for(y=-rad;y<=rad;y++)
{
datb=Math.floor(Math.sqrt(data-Math.pow(y,2)));
document.write("<img src='img001.gif' width='"+(rad-datb)+"' height='1'>");
document.write(datc+datb*2+"' height='1'><br>");
}
document.close();
}
</script>
</head>
<body>
<form name="form01">
■円形の色<br>
<input type="radio" name="r01" checked>赤
<input type="radio" name="r01">青<p>
■円形の半径（ピクセル）<br>
半径：<input type="text" name="txt01"><p><hr>
<input type="button" value="表示" onclick="disp()"><p>
</form>
</body>
</html>
円の半径を rad とすると、式は x2+y2 = rad2 です。rad2 を data に代入しておいてから、y が -rad から rad の間で、x 座標を計算しています。x=√data-y2 です。これを datb として、まず、rad-datb の長さで高さ1ピクセルの透明な横線を書き、次に datb×2 の長さで高さ1ピクセルの、指定した色の横線を書いてから改行しています。
ここでは、一行ずつ書いていますが、1ピクセルずつ、x2+y2 の値と半径の二乗を比較して、小さければ（円の内側なら）色付の点を書き、大きければ（円の外側なら）透明の点を書く方法も考えられますし、この方が計算は簡単です。ところが、実際にこの方法で書いてみると、時間がかかり、半径が大きいと、ブラウザから処理が遅くなるが継続するか？ というメッセージが表示されたりします。計算自体に時間がかかるわけはないのですが、document.write での書き出しには時間がかかり、上の方法の二乗の回数 document.write を実行することで遅くなるようです。
● 三角形
二等辺三角形なら、円形より簡単です。高さと頂角を指定できるようにしてみました。ここをクリックしてください。<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function disp()
{
var data,datb,datc,datd,y;
with(document.form01)
{
data=eval(txt01.value);
datb=Math.tan((eval(txt02.value)/360)*Math.PI);
if(r01[0].checked)
datc="<img src='img003.gif' width='";
else
datc="<img src='img004.gif' width='";
}
date=Math.floor(data*datb);
for(y=-0;y<=data;y++)
{
datd=Math.floor(y*datb);
document.write("<img src='img001.gif' width='"+(date-datd)+"' height='1'>");
document.write(datc+datd*2+"' height='1'><br>");
}
document.close();
}
</script>
</head>
<body>
<form name="form01">
■二等辺三角形を書く<p>
色：<input type="radio" name="r01" checked>赤
<input type="radio" name="r01">青<p>
高さ（ピクセル）：<input type="text" name="txt01">
頂角：<input type="text" name="txt02" value="60">°<p><hr>
<input type="button" value="表示" onclick="disp()"><p>
</form>
</body>
</html>
高さは data に代入します。頂角の半分の角度のタンジェントから、高さに対する底辺の半分の長さの割合を求め、datb に代入します。y=0 の位置では、data×datb の小数点以下を切り捨てて整数にした date の幅の透明な横線を書き、色付の線の長さは 0 です。y の増加により、透明な横線の長さは、datb ずつ減少、色付の線の長さは datb×2 ずつ増加することにより、二等辺三角形にしています。
二等辺三角形は、縦線を使って書くこともできます。ここをクリックしてください。縦線で書いていることがわかるように、色付の線と白い線を交互に書きました。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function disp()
{
var data,datb,datc,datd,date,x;
with(document.form01)
{
data=eval(txt01.value);
datb=Math.tan((eval(txt02.value)/360)*Math.PI);
if(r01[0].checked)
datc="<img src='img003.gif' width=1 height='";
else
datc="<img src='img004.gif' width=1 height='";
}
date=Math.floor(data*datb);
for(x=0;x<date;x++)
{
datd=Math.floor(x/datb);
if(x%2==0)
document.write(datc+datd+"'>");
else
document.write("<img src='img002.gif' width='1' height='"+datd+"'>");
}
for(x=date;x>=0;x--)
{
datd=Math.floor(x/datb);
if(x%2==0)
document.write(datc+datd+"'>");
else
document.write("<img src='img002.gif' width='1' height='"+datd+"'>");
}
document.close();
}
</script>
</head>
<body>
<form name="form01">
■二等辺三角形を書く-2<p>
色：<input type="radio" name="r01" checked>赤
<input type="radio" name="r01">青<p>
高さ（ピクセル）：<input type="text" name="txt01">
頂角：<input type="text" name="txt02" value="60">°<p><hr>
<input type="button" value="表示" onclick="disp()"><p>
</form>
</body>
</html>
底辺の長さの半分の date を計算するところまでは同じです。まず、x を 0 から date まで増加させていき、次に 0 まで減少させ、x を 高さに対する底辺の半分の長さの割合である datb で除した長さの縦線を書いています。この方法だと、透明な線は書く必要がありません。
グラフを書く
実際には、前項のように計算結果により単純な形状の図形を書く、ということが必要になる場合は、ほとんどないと思います。計算をして、同時に必要になる図形は、普通はグラフということになります。
A～E の、最大値の棒の高さを 300ピクセルとして、他は最大値に対する、比率の高さにしています。縦軸の目盛りはないので、値を棒の上に表示しました。項目名と値の表示を、棒とそろえるためにテーブルを使用しています。
この例では、値をグラフに表示しないで、目盛りを表示しました。そのために、A～E の最大値の下一桁を切り上げた値の棒の長さを 300ピクセルとして、この値と、その半分の値を下の目盛りに表示しています。
● 縦棒グラフ
普通の縦棒グラフです。A～E の5項目の正の数値を入力してから、[グラフ表示] ボタンをクリックします。ここをクリックしてください。<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function disp()
{
var i,data=0,datb;
var dat=new Array();
for(i=0;i<=4;i++)
{
dat[i]=eval(document.form01.elements[i].value);
data=Math.max(data,dat[i]);
}
document.write("<table cellspacing='5'><tr valign='bottom' align='center'>");
for(i=0;i<=4;i++)
{
datb=Math.floor((dat[i]/data)*300);
document.write("<td>"+dat[i]+"<br><img src='img003.gif' width='30' height='"+datb+"'></td>");
}
document.write("</tr><tr align='center'><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr></table>");
document.close();
}
</script>
</head>
<body>
<form name="form01">
■縦棒グラフを書く<p>
a：<input type="text" name="txt01"><br>
b：<input type="text" name="txt02"><br>
c：<input type="text" name="txt03"><br>
d：<input type="text" name="txt04"><br>
e：<input type="text" name="txt05"><hr>
<input type="button" value="グラフ表示" onclick="disp()"><p>
</form>
</body>
</html>
A～E の、最大値の棒の高さを 300ピクセルとして、他は最大値に対する、比率の高さにしています。縦軸の目盛りはないので、値を棒の上に表示しました。項目名と値の表示を、棒とそろえるためにテーブルを使用しています。
● 横棒グラフ
横棒グラフも同じように書くことができます。ここをクリックしてください。<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function disp()
{
var i,data=0,datb;
var dat=new Array();
var lab=new Array("a","b","c","d","e");
for(i=0;i<=4;i++)
{
dat[i]=eval(document.form01.elements[i].value);
data=Math.max(data,dat[i]);
}
data=Math.ceil(data*0.1)*10;
document.write("<table cellspacing='5'>");
for(i=0;i<=4;i++)
{
datb=Math.floor((dat[i]/data)*300);
document.write("<tr><td>"+lab[i]+"</td><td><img src='img003.gif' width='"+datb+"' height='30'></td></tr>");
}
document.write("<tr><td></td><td><img src='img004.gif' width='2' height='6'><img src='img004.gif'
width='148' height='2' align='top'><img src='img004.gif' width='2' height='6'><img src='img004.gif'
width='148' height='2' align='top'><img src='img004.gif' width='2' height='6'></td></tr>");
document.write("<tr><td></td><td>0<img src='img001.gif' width='140' height='1'>"+data/2+"<img src='img001.gif'
width='140' height='1'>"+data+"</td></tr>");
document.write("</table>");
document.close();
}
</script>
</head>
<body>
<form name="form01">
■横棒グラフを書く<p>
a：<input type="text" name="txt01"><br>
b：<input type="text" name="txt02"><br>
c：<input type="text" name="txt03"><br>
d：<input type="text" name="txt04"><br>
e：<input type="text" name="txt05"><hr>
<input type="button" value="グラフ表示" onclick="disp()"><p>
</form>
</body>
</html>
この例では、値をグラフに表示しないで、目盛りを表示しました。そのために、A～E の最大値の下一桁を切り上げた値の棒の長さを 300ピクセルとして、この値と、その半分の値を下の目盛りに表示しています。
今回は、簡単なグラフを書いたところまでにします。