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

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

使い方

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

• このページのソースを表示して、<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 を設定することで、このデフォルトとは異なる値を設定できる。

使用例

• ポアソン分布の正規分布による近似: ポアソン分布に整数値だけを離散的にプロットする plotInt 関数を使用している。テキストボックスに入力された数からリアルタイムにパラメータを変化させてグラフを描画する。（ソース）
• 指数と対数関数の微分: 小さめのグラフ。軸ラベルの文字を変えている。（ソース）

Canvas の参考サイト

• Canvasリファレンス (HTMLクイックリファレンス)
• HTML Canvas 2D Context, Level 2 (W3C Working Group Note, 2015/9/29)
• HTML5 Canvas (w3schools.com)
• 【連載】第一回HTML5でCanvasアプリを作る入門編 ~canvas関連メソッドリファレンス~ (nigoblog, 2013/1/4)
• HTML5 の Canvas を使って素晴らしいグラフィックスを作成する (Ken Bluttman, IBM, 2011/2/8)