2011年9月5日月曜日

cosθの値をグラフにしてみる

0度〜360度のcosθの値をグラフに出してみよう。HTML canvasを使おう。




一番上が1を表している。真ん中が0で、一番下が-1である。一番左が0を表していて縦の目盛線は、45ずつに引いている つまり、0度はcosは1。それから角度が拡大するにつれてcosは徐々に小さくなっていき、90度だとcosは0になる。90度を超えるとマイナス数値になり、180度でcosは−1になる。180度を超えると逆に大きくなり、270度で0に戻る。270度を超えるとプラス数値になり、360度で1に戻る。

<canvas id="cosCanvas" width="365" height="110"></canvas>
<script type="text/javascript">
var cosCanvas = document.getElementById("cosCanvas");
var COSC = cosCanvas.getContext("2d");
var CW = cosCanvas.width, CH = cosCanvas.height;

var cos = 0;

for(var deg=0;deg<361;deg++){
    cos = Math.cos(deg*Math.PI/180);
    COSC.beginPath();
    COSC.fillStyle = '#ff5500';
    COSC.arc(deg,CH/2-cos*50, 1, 0, 360,false);
    COSC.fill();
}

COSC.beginPath();
COSC.strokeStyle = '#666666';
COSC.moveTo(0,CH/2); 
COSC.lineTo(CW,CH/2); 
COSC.closePath();
COSC.stroke();

for(var i=0;i<361;i+=45){
    COSC.beginPath();
    COSC.strokeStyle = '#666666';
    COSC.moveTo(i,0); 
    COSC.lineTo(i,CH); 
    COSC.closePath();
    COSC.stroke();
}
</script>

0 件のコメント:

コメントを投稿