[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>

参考ページ

• https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
• https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/arc

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -