CanvasRenderingContext2D.arc()

Canvas 2D APIのCanvasRenderingContext2D.arc()メソッドは、パスに円弧を加えます。円弧の中心座標は(x, y)で半径がr、角度startAngleからendAngleまで、anticlockwiseの向きに描かれます(デフォルトは時計回り)。

構文

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

引数

x
円弧の中心のx座標値。
y
円弧の中心のy座標値。
radius
円弧の半径。
startAngle
円弧の始まりの角度。x軸の正方向から時計回りに定められるラジアン角。
endAngle
円弧の終わりの角度。x軸の正方向から時計回りに定められるラジアン角。
anticlockwise 省略可
省略可能なBoolean。trueは、円弧を反時計回りに始まりから終わりの角度に向けて描きます。デフォルトは時計回り。

例

arc()メソッドの使い方

このコードは、単純な円の描き方を示しています。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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

以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。

異なった形状の実例

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

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 形状を描く
// (訳注:横に 180, 270, 360 度の円を3つずつ、縦に時計回りか反時計回りにパスを引いたときの stroke() と fill() を示しています)
for (var i = 0; i < 4; i++) {
  for(var j = 0; j < 3; j++) {
		ctx.beginPath();
		var x          = 25 + j * 50;                  // x座標
		var y          = 25 + i * 50;                  // y座標
		var radius     = 20;                           // 円弧の半径
		var startAngle = 0;                            // 円弧の開始角
		var endAngle   = Math.PI + (Math.PI * j) /2;   // 円弧の終了角
		var anticlockwise  = i % 2 == 1;               // 時計回りか反時計回りか

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

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

ScreenshotLive sample

仕様

仕様 状況 コメント
HTML Living Standard
CanvasRenderingContext2D.arc の定義		 現行の標準  

ブラウザの互換性

BCD tables only load in the browser

Geckoについての注釈

Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)より:

  • 引数anticlockwiseは省略できます。
  • 負の半径を与えるとIndexSizeErrorのエラーが起こります("Index or size is negative or greater than the allowed amount"(インデックスまたはサイズが負数か、範囲を超えた値です)).

参考情報