スタートページJavascriptCANVAS

仮想XY軸の設定:xycoordinate.jsの利用


仮想XY軸CANVASの必要性と概要

CANVASを用いて右図のようなグラフを作成したいことが多くあります。このとき、CANVASをそのまま使うのでは、次のような不都合があります。

これを解決するために、CANVASライブラリ「xycoordinate.js」を自作しました。
 CANVASの左下隅を(xmin, ymin)、右上隅を(xmax, ymax)と定義して、XY座標系を設定します。その座標系での任意の点P(x, y)を用いて、グラフや多様な図形を描くことができます。

右図のグラフを作成するソースリストは次の通りです。
SCRIPT部
<script src="../xycoordinate.js"></script>
<script>

function init() {
    var x,y, x0,y0, dx;
    // XY座標軸の設定
    cw = 400; ch = 400;                                       // A
    xmin = -2; xmax=4; ymin=-2; ymax= 4;
    setCanvas("canvas1", "black");                            // B
    drawAxisGrid("all", "aqua", 4, "gray", 1);                // C
    drawAxisScale(xmin+1, xmax-1, ymin+1, ymax-1, "white");   // D
    // グラフ表示                                             // E
    dx = (xmax-xmin)/100;
    x0 = xmin;
    y0 = x0*(x0-1)*(x0-2);
    for (x=xmin+dx; x<=xmax; x=x+dx) {
        y = x*(x-1)*(x-2);
        drawLine(x0,y0, x,y, "white", 6);                     // F
        x0 = x;
        y0 = y;
    }
    drawText("y = x*(x-1)*(x-2)", -1.5, 3.5, "start", "white", "24px 'MS ゴシック'");
}                                                             // G
</script>
BODY部
 :
<canvas id="canvas1" width="400" height="400"></canvas>


xycoordinate.jsの関数群


この下に「canvas id="canvas2" width="400" height="400"」のCANVASがあります。

xycoordinate.jsの持つ関数群は、xycoordinate.jsに一覧表とソースコードがあります。ここでは右図に関係するものだけを列挙します。右の[実行]をクリックしてください。



数式グラフ描画のヒント

下記のようなツールや典型的なグラフが「美しい数式グラフ」にあります。また、「数式でお絵かき」もどうぞ。

数式の入力(陽関数 y=f(x))

数式の指定
y=f(x)=
独立変数xの計算範囲とグラフの表示範囲
xmin= xmax= ymin= ymax=
(入力項目をいろいろ変えて[実行]してください)

数式のグラフでは、数式 y=f(x) をフォームから与えられると便利です。また、グラフの範囲を広くしたり狭くすることも必要です。
ソースリスト
SCRIPT部
function rei3() {
  var f, x,y, x0,y0, dx;
  // 入力データの読込
  f = document.form3.f.value;         ・・・A
  xmin = eval(document.form3.xmin.value);   ・・・B
  xmax = eval(document.form3.xmax.value);
  ymin = eval(document.form3.ymin.value);
  ymax = eval(document.form3.ymax.value);
  // xy座標系の設定
  cw = 400; ch = 400;
  setCanvas("canvas3", "black");
  drawLine(xmin,0, xmax,0, "aqua", 1);
  drawLine(0,ymin, 0,ymax, "aqua", 1);
  // 初期値設定
  dx = (xmax-xmin)/100;
  x = xmin;
  x0 = x;
  y0 = eval(f);                ・・・C
  // ループ
  for (x=xmin+dx; x<=xmax; x=x+dx) {
    y = eval(f);               ・・・C
    drawLine(x0,y0, x,y, "white", 4);
    x0 = x;
    y0 = y;
  }
}
BODY部
  <form name="form3">
  数式の指定<br>
  y=f(x)=<input type="text" size="30" name="f" value="x*(x-1)*(x-2)"></input>><br>
  独立変数xの計算範囲とグラフの表示範囲<br>
  xmin=<input type="text" size="3" name="xmin" value="-2"></input>
  xmax=<input type="text" size="3" name="xmax" value="4"></input>
  ymin=<input type="text" size="3" name="ymin" value="-2"></input>
  ymax=<input type="text" size="3" name="ymax" value="4"></input>
  <input type="button" value="実行" onclick="rei3()"></input>
  </form>


陰関数(f(x,y)=0)

数式の指定
f(x,y)==0
グラフの表示範囲
xmin= xmax= ymin= ymax=

SCRIPT部
function rei4() {
  var f, x,y, dx, eps, fxy;
  // 入力データの読込
  f = document.form4.f.value;
  xmin = eval(document.form4.xmin.value);
  xmax = eval(document.form4.xmax.value);
  ymin = eval(document.form4.ymin.value);
  ymax = eval(document.form4.ymax.value);
  // xy座標系の設定
  cw = 400; ch = 400;
  setCanvas("canvas4", "black");
  drawLine(xmin,0, xmax,0, "aqua", 1);
  drawLine(0,ymin, 0,ymax, "aqua", 1);
  //グラフ表示
  dx = (xmax-xmin)/cw; dy = (ymax-ymin)/ch;           ・・・A
  eps = 0.01;
  for (x=xmin; x<=xmax; x=x+dx){                 ・・・B
    for (y=ymin; y<=ymax; y=y+dy) {              ・・・B
      fxy = eval(f);                     ・・・C
      if (Math.abs(fxy) < eps) drawPoint(x,y, "white", 4);  ・・・D
    }
  }

}
BODY部
  数式の入力(陽関数 y=f(x))とほぼ同様なので省略

陰関数の場合は、xの値からyを求めることはできません。それで、グラフ表示(赤字の箇所)が大きく変わります。このロジックは次のようになります。

非常に無駄な計算が多く非効率ですが、簡単で汎用的に使える利点があります。