環境にできるだけ依存せずにグラフを描いたりしたいとなるとHTML5かなぁと思い、はじめてのJavaScript。まだ配列の使い方を調べていないので、sinもcosも直に計算&描画してます。
使ったHTMLファイルは以下。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>drawing sinwave</title> <script type="text/javascript" charset="utf-8"> function pageLoaded() { // get canvas context var canvas = document.getElementById("graphcanvas"); var context = canvas.getContext("2d"); // constants var WIDTH = canvas.width; var HEIGHT = canvas.height; var N = WIDTH; // draw sine wave context.beginPath(); context.strokeStyle = "#0080ff"; context.lineWidth = 2.0; for (var n=0; n<N; n++) { var x = n; var y = HEIGHT/2-Math.sin(2*Math.PI * n/WIDTH)*HEIGHT/2; if (n == 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } } context.stroke(); // draw cosine wave context.beginPath(); context.strokeStyle = "#ff8000"; for (var n=0; n<N; n++) { var x = n; var y = HEIGHT/2-Math.cos(2*Math.PI * n/WIDTH)*HEIGHT/2; if (n == 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } } context.stroke(); } </script> </head> <body onload="pageLoaded();"> <canvas width="640" height="480" id="graphcanvas" style="border: black 1px solid;" ></canvas> </body> </html>
次はスライダーを付けて周波数を調整できるようにしたり、位相をずらしてゆくアニメーションを付けたりするかな。
グラフを描きたいのであれば qiita.com をはじめとする記事を参考にしたいところですが、まずはJavaScriptに慣れるところから。