関数のグラフを描画するプログラム

著者：関 勝寿
公開日：2020年1月3日 - 最終更新日：2023年1月9日
キーワード： jekyll javascript math

HTML5 の Canvas要素 で関数のグラフを描画するプログラム DrawCartesianGraph を JavaScript で作成した。

このブラウザはHTML5のCanvas要素に対応していないためグラフを表示できません。

使い方

以下のようにして、指定した関数のグラフを描画することができる。

  • このページのソースを表示して、<canvas id="canvas" width="600" height="600"から</script>までをコピーしてHTML文書内に貼り付け、適宜書き換える。
  • 描画エリア canvas の大きさは <canvas id="canvas" width="600" height="600" の width と height で指定する。
  • <script src="https://sekika.github.io/js/graph.js"></script> では、graph.js のURLを指定する。このサーバー上の graph.js が書き換えられる可能性があるため、コピーして使うことを推奨する。
  • var ctx = c.getContext('2d'); で指定されたキャンバスのコンテキスト ctx に対してグラフを描画する。グラフを描画するためパラメータは ctx のプロパティとして設定する。
  • // Set Cartesian coodinate system for the graph (GC)のブロックで、グラフの座標系を、ctx の座標系に対して原点 (ctx.originX, ctx.originY)、単位ベクトル (ctx.unitX, ctx.unitY) で定める。ここでは、原点 (300, 500)、単位ベクトル (50, -50) としている。
  • // Draw graphs のブロックで、以下のようにグラフを描画している。
  • drawAxis(ctx); で ctx のキャンバスに座標軸を描画する。
  • drawScaleX(ctx); でx軸の目盛りを、drawScaleY(ctx); でy軸の目盛りを描画する。目盛りの間隔を変えるときには、ctx.scaleX と ctx.scaleY にその値を入れておく。
  • draw(ctx, exp); で ctx のキャンバスに exp 関数を描画する。exp 関数はこの JavaScript 内の function exp(x) で定義されている。
  • draw(ctx, plus, 1); で ctx のキャンバスに plus 関数を描画する。3つ目の引数である1は、plus 関数の2つ目の引数である。このように、draw 関数の3つ目の引数があるときは、draw 関数の2つ目の引数で指定されている関数の2つ目の引数として渡される。関数に複数の引数があるときには、1つの配列変数にまとめれば良い。
  • このように、JavaScript で自由に関数を定義して、その関数を設定した座標系で表示することができる。
  • ctx.fillText("y = exp(x)", 420,80); では、HTML canvas strokeText() Method で文字を直接描画している。
  • パラメータの一覧は graph.js の頭の const で宣言されている定数を参照。たとえば、const labelX = "x"; // Label of the x axis はx軸のラベルにはxという文字が設定されていることを意味する。ctx の同じ名前のプロパティ、すなわち ctx.labelX を設定することで、このデフォルトとは異なる値を設定できる。

使用例

Canvas の参考サイト