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 Optional

省略可能な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の中身がどう変わるか実際に確かめられます。

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

異なった形状の実例

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

<canvas id="canvas" width="150" height="200"></canvas>

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();
		}
	}
}

Screenshot	Live sample

仕様

ブラウザの互換性

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"(インデックスまたはサイズが負数か、範囲を超えた値です)).

参考情報

• このメソッドのインターフェース CanvasRenderingContext2D