CanvasRenderingContext2D: arc() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CanvasRenderingContext2D.arc() はキャンバス 2D API のメソッドで、サブパスに円弧を加えます。

構文

js
arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)

arc() メソッドは (x, y) を中心とし、 radius を半径とした円弧を作成します。角度は startAngle から endAngle まで、 counterclockwise で指定された向き（既定では時計回り）に描かれます。

引数

x

円弧の中心の水平座標です。

y

円弧の中心の垂直座標です。

radius

円弧の半径です。正の数である必要があります。

startAngle

円弧の始まりの角度を、 X 軸の正の方向から時計回りに定められるラジアン角で表します。

endAngle

円弧の終わりの角度を、 X 軸の正の方向から時計回りに定められるラジアン角で表します。

counterclockwise 省略可

省略可能な論理値です。 true の場合、円弧を反時計回りに始まりから終わりの角度に向けて描きます。既定値は false （時計回り）です。

返値

なし (undefined)。

例

完全な円の描画

このコードは、 arc() メソッドで完全な円を描く方法を示します。

HTML

html
<canvas></canvas>

JavaScript

円弧の X 座標は 100、 Y 座標は 75、半径は 50 です。円弧を一周させるには、 0 ラジアン（0**°）の角度で始まり、 2π ラジアン（360°**）の角度で終わります。

js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

結果

様々な形状のデモ

以下の例は様々な形を描くことで、 arc() メソッドは何ができるのかを示します。

js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// Draw shapes
for (let i = 0; i <= 3; i++) {
  for (let j = 0; j <= 2; j++) {
    ctx.beginPath();
    let x = 25 + j * 50; // x 座標
    let y = 25 + i * 50; // y 座標
    let radius = 20; // 円弧の半径
    let startAngle = 0; // 円弧の開始位置
    let endAngle = Math.PI + (Math.PI * j) / 2; // 円弧の終了位置
    let counterclockwise = i % 2 === 1; // 円弧を描く方向

    ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

結果

仕様書

Specification
HTML
# dom-context-2d-arc-dev

ブラウザーの互換性

関連情報