[HTML5] Canvasに図形を描く - 円

Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。

『円』を描画する
参考ページ

『円』を描画する

正円(真円)の輪郭

中心点から常に同じ感覚で集まった点が曲線になった物……雑に言うとまんまるな円を描きます。まずは輪郭を描きます。

実行例

ソース

<canvas id="board" width="300" height="150"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  ctx.beginPath();
  ctx.arc(
    100,          // 中心点X
    80,           // 中心点Y
    50,           // 半径(radius)
    0,            // 円の描画開始角度(startAngle)
    2 * Math.PI,  // 円の描画終了角度(endAngle)
    false         // 時計回りか(false)、反時計周りか(true)。省略可能でデフォルトはfalse
  );
  ctx.stroke();
}
</script>

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise])

x, y: 円の中心点(x, y)
radius: 円の半径
startAngle: 円弧の始まりの角度（ラジアン角）
endAngle: 円弧の終わりの角度（ラジアン角）
anticlockwise: 円弧を描画する方向。時計回りか(false)、反時計周りか(true)。省略可能でデフォルトはfalse。

正円(真円)を塗りつぶす

先ほどは輪郭だけでしたが、今度は塗りつぶしてみます。

実行例
左側が単純に円を塗りつぶした物、右側が塗りつぶしつつ枠線を描いた物になります。

ソース

<canvas id="board" width="300" height="150"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  //-------------------------------
  // 塗りつぶし
  //-------------------------------
  ctx.beginPath();
  ctx.arc(80, 70, 50, 0, 2 * Math.PI);    // 円の描画
  ctx.fillStyle = "Orange";    // 塗りつぶす色
  ctx.fill();                  // 塗りつぶし

  //-------------------------------
  // 塗りつぶし＋輪郭
  //-------------------------------
  // 円の描画
  ctx.beginPath();
  ctx.arc(220, 70, 50, 0, 2 * Math.PI);   // 円の描画
  ctx.fillStyle = "Orange";    // 塗りつぶす色
  ctx.fill();                  // 塗りつぶし

  // 輪郭の描画
  ctx.strokeStyle = "Red";    // 輪郭の色
  ctx.lineWidth = 10;         // 輪郭の太さ
  ctx.stroke();               // 描画
}
</script>

欠けた円

完全な円ではなく、一部分が欠落した円を描きます。こいつは単純にctx.arc()の引数startAngle, endAngleを調整してやります。

実行例

ソース

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

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  let x = 100;
  let y = 100;
  let r = 100;
  let startAngle = 0;
  let endAngle   = (255 * Math.PI) / 180;

  ctx.beginPath();
  ctx.arc(x, y, r, startAngle, endAngle, false);
  ctx.lineTo(x, y);
  ctx.fillStyle = "Orange";
  ctx.fill();
}
</script>