円・半円

【実行画面】

【実行画面のソーコード】

<canvas id="mycanvas" width="400" height="400"></canvas>

<script>
var canvas = document.getElementById('mycanvas');
var c = canvas.getContext('2d');

c.strokeStyle = 'red';  // 線の色
// パスの開始
c.beginPath();
c.arc(75, 75, 50, 0, 2 * Math.PI, false);
// 描画
c.stroke();

c.fillStyle = 'green';  // 塗りつぶしの色
// パスの開始
c.beginPath();
c.arc(200, 75, 50, 0, 2 * Math.PI, false);
// 描画
c.fill();

// ラジアンを求める
var radianStart = getRadian(0);
var radianEnd = getRadian(90);

c.strokeStyle = 'red';  // 線の色
// パスの開始
c.beginPath();
c.arc(75, 275, 50, radianStart, radianEnd, false);
// 描画
c.stroke();

c.fillStyle = 'green';  // 塗りつぶしの色
// パスの開始
c.beginPath();
c.arc(200, 275, 50, radianStart, radianEnd, false);
// 描画
c.fill();

// ラジアンを返す関数
function getRadian(degree)
{   return degree * Math.PI / 180;
}
</script>

二次元のコンテキストを取得して、キャンバスに円・半円を描きます。
arc のパラメータは次のようになっています。

    arc(中心のx座標, 中心のy座標, 半径, 開始角度, 終了角度, 描く方向);

赤色の円を描きます。

c.strokeStyle = 'red';
c.beginPath();
c.arc(75, 75, 50, 0, 2 * Math.PI, false);
c.stroke();

緑色の塗りつぶした円を描きます。

c.fillStyle = 'green';
c.beginPath();
c.arc(200, 75, 50, 0, 2 * Math.PI, false);
c.fill();

赤色の円の線分を描きます。

// ラジアンを求める
var radianStart = getRadian(0);
var radianEnd = getRadian(90);

c.strokeStyle = 'red';
c.beginPath();
c.arc(75, 275, 50, radianStart, radianEnd, false);
c.stroke();

緑色の半円を描きます。

c.fillStyle = 'green';
c.beginPath();
c.arc(200, 275, 50, radianStart, radianEnd, false);
c.fill();

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)