三角関数

中心角とsin/cosの値を表示するアプリを作成

JavaScriptでは、Math.sin(),Math.cos()という関数が用意されているので、それを利用させてもらった。

中心角=0度
キャンバスの表示内容を説明する代替テキストです。

以下ソース

<p><input id="theta" max="360" min="0" type="range" value="0" /> 中心角=<span id="degree">0</span>度<br /> <canvas id="graph" width="600" height="600">キャンバスの表示内容を説明する代替テキストです。</canvas></p>
<script>// <![CDATA[
let ctx,
 degree = 0;

function init() {
 let canvas = document.getElementById("graph");
 ctx = canvas.getContext("2d");
 ctx.font = "24px sans-serif";
 paint();
 }
let input = document.querySelector("input");
 input.onchange = update;

function update() {
 degree = document.getElementById("theta").value;
 document.getElementById("degree").textContent = degree;
 paint();
 }

function drawLine(x0, y0, x1, y1, color) {
 ctx.strokeStyle = color;
 ctx.beginPath();
 ctx.moveTo(x0, y0);
 ctx.lineTo(x1, y1);
 ctx.closePath();
 ctx.stroke();
 }

function paint() {
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, 600, 600);
 ctx.save(); // コンテキストを保存
 ctx.translate(300, 300); //(300,300)を原点へ

// 座標軸
 drawLine(0, -300, 0, 300, "black");
 drawLine(-300, 0, 300, 0, "black");

let s0 = Math.sin((degree * Math.PI) / 180).toFixed(3);
 let c0 = Math.cos((degree * Math.PI) / 180).toFixed(3);
 let c = c0 * 200,
 s = s0 * -200;

drawLine(0, 0, c, s, "red");
 ctx.arc(0, 0, 200, 0, Math.PI * 2);
 ctx.stroke();

// ラベル
 drawLine(c, s, c, 0, "blue");
 ctx.strokeText("cos:" + c0, c - 10, 20);
 drawLine(c, s, 0, s, "green");
 ctx.strokeText("sin:" + s0, -40, s - 10);

ctx.restore(); // コンテキストを復元
 }
 window.onload = init;
// ]]></script>

Enjoy!!

utthi_fumi is JavaScript Programmer.