【JavaScript入門】円弧の描画
円や扇形、ゲージメーターなどを Canvas で描くときの要となるのが 円弧（アーク）パス です。円弧は「中心座標・半径・開始角度・終了角度」を指定して曲線を生成し、その内側を塗ったり線を引いたりできます。ここでは円弧を作る 2 つのメソッド arc と arcTo を対比しながら、ラジアン表記や回転方向の概念を押さえ、実際にコードを書いて動きを確認します。
１．円弧パスの基礎
1.1. ラジアンと角度の対応
角度 0 rad は X 軸正方向（Canvas 右）から始まり、時計回り が正方向です。
| 度 | ラジアン | Math 定数 |
|---|---|---|
| 0° | 0 | 0 |
| 90° | π ÷ 2 | Math.PI / 2 |
| 180° | π | Math.PI |
| 270° | 3π ÷ 2 | 1.5 * Math.PI |
| 360° | 2π | 2 * Math.PI |
1.2. arc メソッド
| メソッド | 概要 |
|---|---|
arc(x, y, r, start, end, counter?) | 中心 (x, y)、半径 r、開始角 start、終了角 end を指定。counter に true を渡すと反時計回り |
1.3. 回転方向のポイント
- 既定は時計回り (
counter = false) - 同一パスに複数
arcを含める場合は方向を統一しないと面がねじれる
２．arc を使った描画実践
2.1. サンプルコード
ファイル名： arc_demo.html
PNGファイルのダウンロードは、ここ「checker.png」からできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>🌀 Arc Demo</title>
<style>
body{font-family:"Segoe UI",sans-serif;background:#f4f9ff;text-align:center;margin:2rem}
h1{font-size:1.8rem;margin-bottom:1rem}
canvas{border:1px solid #666;border-radius:6px;background:url(./checker.png)}
#note{margin-top:.8rem;color:#004d40;font-weight:bold}
</style>
</head>
<body>
<h1>🌀 円弧の描画デモ</h1>
<canvas id="cvs" width="420" height="260"></canvas>
<p id="note">円弧を描画しました！</p>
<script>
(() => {
const ctx = document.getElementById('cvs').getContext('2d');
ctx.fillStyle = '#ffb3c1'; // 塗り色
ctx.strokeStyle = '#3559e0'; // 線色
ctx.lineWidth = 10;
ctx.lineCap = 'round';
/* ① 時計回り 240° */
ctx.beginPath();
ctx.arc(110, 170, 80, 0, 240/180*Math.PI);
ctx.fill();
ctx.stroke();
ctx.strokeRect(190,160,10,10); // 0° の基準点
/* ② 反時計回り 240° */
ctx.beginPath();
ctx.arc(210, 90, 70, 0, 240/180*Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.strokeRect(280,80,10,10); // 0° の基準点
/* ③ 360° でフルサークル */
ctx.beginPath();
ctx.arc(320, 180, 65, 0, 2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.strokeRect(385,170,10,10); // 0° の基準点
})();
</script>
</body>
</html>2.2. ブラウザの出力例
- 左下：桃色に塗られた 240° の扇形
- 右上：反時計回りで描いたため左右対称の 240° 扇形
- 右下：完全な円
- それぞれ右端 (0 rad) に青い小さな枠があるので回転起点が視覚化される。
３．arcTo でコーナーを丸める
3.1. メソッド概要
| メソッド | 概要 |
|---|---|
arcTo(x1, y1, x2, y2, r) | 直前座標 → (x1, y1) へ伸び、そのまま 半径 r の円弧で方向を変えて (x2, y2) へ |
角の少し手前で自動的に円弧に切り替わるため、滑らかなコーナーや道路のカーブを表現するのに便利です。
3.2. サンプルコード
ファイル名： arcTo_demo.html
PNGファイルのダウンロードは、ここ「checker.png」からできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>🔄 ArcTo Demo</title>
<style>
body{font-family:"Segoe UI",sans-serif;background:#f4f9ff;text-align:center;margin:2rem}
h1{font-size:1.8rem;margin-bottom:1rem}
canvas{border:1px solid #666;border-radius:6px;background:url(./checker.png)}
#note{margin-top:.8rem;color:#004d40;font-weight:bold}
</style>
</head>
<body>
<h1>🔄 arcTo で曲線コーナー</h1>
<canvas id="c2" width="420" height="260"></canvas>
<p id="note">arcTo で角を丸めました！</p>
<script>
(() => {
const ctx = document.getElementById('c2').getContext('2d');
ctx.strokeStyle = '#ff7043';
ctx.lineWidth = 8;
ctx.fillStyle = '#ffd180';
/* パス定義 */
ctx.beginPath();
ctx.moveTo(40, 220); // (x0, y0)
ctx.arcTo(380, 220, 380, 60, 140); // 曲線で折れる
ctx.stroke();
/* 補助表示 */
ctx.lineWidth = 2;
ctx.strokeRect(240, 220, 140, -160); // 接線方向の四角
ctx.fillRect(30,210,20,20); // x0,y0
ctx.fillRect(370,210,20,20); // x1,y1
ctx.fillRect(370,50,20,20); // x2,y2
})();
</script>
</body>
</html>3.3. ブラウザの出力例
- 左下から右へ進み、半径 140 px の円弧で上方向へ折れ曲がる太いオレンジ線
- 薄い枠線が円弧の中心角度を想像しやすく補助
- 3 つの青枠（始点・制御点・終点）の関係が一目で分かる。
まとめ
arcは「中心・半径・開始角・終了角」で単独の円弧や扇形を作る万能メソッド。arcToは「現在位置から 2 点を経由して滑らかなカーブ」を自動生成し、角丸や曲線レイアウトに最適。- 角度は ラジアン で指定、回転方向を
counter引数で制御。 - 複数
arcを 1 つのパスにまとめると描画が高速化されるため、インジケータやアニメーションでは特に効果的。
これらのテクニックを応用すれば、時計の目盛り、ダッシュボードのゲージ、キャラクタの当たり判定円など、さまざまな円形 UI をスムーズに実装できます。