JavaScriptではじめてのグラフ描画

環境にできるだけ依存せずにグラフを描いたりしたいとなるとHTML5かなぁと思い、はじめてのJavaScript。まだ配列の使い方を調べていないので、sinもcosも直に計算&描画してます。

f:id:amarui:20171007110807p:plain

使った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に慣れるところから。