sample: draw unit circle in canvas

by sii_side

HTML

<canvas id="g" width="300" height="300"></canvas>

JavaScript

var canvas, ctx, w, h, sDeg, eDeg;

canvas = document.querySelector("#g");
ctx    = canvas.getContext("2d");
w      = canvas.width;
h      = canvas.height;
sDeg   = Math.PI / 180 * 30;   //角度は弧度法
eDeg   = Math.PI / 180 * 150;  //　　〃

//軸（薄めの色かと細めに設定）
ctx.strokeStyle = "#999";
ctx.lineWidth   = 0.5;

//y軸
ctx.beginPath();
ctx.moveTo(w / 2, 0);
ctx.lineTo(w / 2, h);
ctx.stroke();
ctx.closePath();

//x軸
ctx.beginPath();
ctx.moveTo(0, h / 2);
ctx.lineTo(w, h / 2);
ctx.stroke();
ctx.closePath();

//360度の単位円（薄めに）
ctx.strokeStyle = "#ccc";

ctx.beginPath();
ctx.arc(w / 2, h / 2, w / 3, 0, Math.PI / 180 * 360);
ctx.stroke();
ctx.closePath();

//範囲を限定した単位円（赤くかつ太くする）
ctx.strokeStyle = "#f00";
ctx.lineWidth   = 2;

ctx.beginPath();
ctx.arc(w / 2, h / 2, w / 3, sDeg, eDeg, true);
ctx.stroke();
ctx.closePath();