[JavaScript] canvasに円を描画する（.arc）

投稿日：2017年11月8日更新日：2018年9月19日

canvasに円を描画するには、.beginPath()と.arc()を使用します。

サンプルソース

例）canvasに円を描画する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
window.onload=function(){
  //コンテキストを生成
  var cvs = document.getElementById("cvs1");
  var ctx = cvs.getContext("2d");

  //色を指定
  ctx.strokeStyle="blue";  //線の色を青に指定
  ctx.fillStyle="red";     //塗りつぶしの色を赤に指定

  //円
  ctx.beginPath();
  ctx.arc(100, 100, 40, 0, Math.PI*2, false);
  ctx.stroke();

  //円（塗りつぶし）
  ctx.beginPath();
  ctx.arc(200, 100, 40, 0, Math.PI*2, false);
  ctx.fill();

  //半円
  ctx.beginPath();
  ctx.arc(300, 100, 40, 0, Math.PI, false);
  ctx.stroke();

  //半円（塗りつぶし）
  ctx.beginPath();
  ctx.arc(400, 100, 40, 0, Math.PI, false);
  ctx.fill();
}
</script>
</head>
<body>
  <canvas id="cvs1" width="450" height="150"></canvas>
</body>
</html>

<!DOCTYPE html>

<head>

window.onload=function(){

//コンテキストを生成

var cvs = document.getElementById("cvs1");

var ctx = cvs.getContext("2d");

//色を指定

ctx.strokeStyle="blue"; //線の色を青に指定

ctx.fillStyle="red"; //塗りつぶしの色を赤に指定

//円

ctx.beginPath();

ctx.arc(100, 100, 40, 0, Math.PI*2, false);

ctx.stroke();

//円（塗りつぶし）

ctx.beginPath();

ctx.arc(200, 100, 40, 0, Math.PI*2, false);

ctx.fill();

//半円

ctx.beginPath();

ctx.arc(300, 100, 40, 0, Math.PI, false);

ctx.stroke();

//半円（塗りつぶし）

ctx.beginPath();

ctx.arc(400, 100, 40, 0, Math.PI, false);

ctx.fill();

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

上記サンプルの実行結果です。

構文

arcの構文です。

（arc構文）: arc(中心x座標, 中心y座標, 半径, 円弧の開始角, 円弧の終了角, 描画の方向)

中心x座標	円の中心位置（px）
中心y座標	円の中心位置（px）
半径	半径（px）
円弧の開始角	単位はラジアン
円弧の終了角	単位はラジアン
描画の方向	true：反時計回り　false:時計回り（デフォルト）

解説

円を描画する場合は、beginPathでパスを作ってから、arcメソッドで作画し、strokeで描画します。
塗りつぶしたい場合はstrokeの代わりに、.fill()を使用します。
角度からラジアンに変換するには、「角度ｘMath.PI/180」で求められます。
例）60度⇒ 60*Math.PI/180

執筆者：とら

カタヤマ　ユウスケより:

2018年9月18日 8:28 AM

実行してみました。3番目の円弧の左半分までしか表示されませんでした。
コードを見ると、（４００，１００）を中心に、半径４０の円弧を描くことになっています。
これでは、”CANVAS”の幅が不足することが判りました。
”ｗｉｄｔｈ”を「４５０」にすると、”実行結果”の通りになりました。
ペーストしたコードを確認してもらうために、このようにしてあるのでしょう。
ありがとうございました。

返信
- とらより:
  
  2018年9月19日 10:38 PM
  
  こんにちは
  表示しきれていないのは、サンプルの記述ミスでした。
  widthを450に修正させて頂きました。
  
  ご指摘ありがとうございます m(_ _)m
  
  返信

comment コメントをキャンセル