投稿者 tel | 2010年3月19日

canvasでグラフを描いてみる

canvasでグラフを描いてみる。JavaScriptだと関数を楽に扱えるからグラフを描くのが楽チンだ。

function plot(ctx, f, a, b) {
  var w = 100;
  var h = 100;
 
  ctx.strokeStyle = '#AAA';
  ctx.beginPath();
  ctx.moveTo(100.5, 0);
  ctx.lineTo(100.5, 200);
  ctx.moveTo(0, 100.5);
  ctx.lineTo(200, 100.5);
  ctx.stroke();
  
  ctx.strokeStyle = '#000';
  ctx.beginPath();
  var x = a;
  var y = f(a);
  x = x / (b - a) * 200;
  y = y / (b - a) * 200;
  ctx.moveTo(w + x, h - y);
  for(var i = 1; i <= 100; i++) {
    x = i * (b - a) / 100.0 + a;
    y = f(x);
    x = x / (b - a) * 200;
    y = y / (b - a) * 200;
    ctx.lineTo(w + x, h - y);
  }
  ctx.stroke();
}

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  plot(ctx, function(x) { return Math.sin(x); }, -4.0, 4.0);
  plot(ctx, function(x) { return Math.cos(x); }, -4.0, 4.0);
}

サインのグラフとコサインのグラフを一緒に表示してみた。canvasだとブラウザで表示した結果をそのままPNGで保存できるので便利だ。



コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。