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
省略可能なBooleantrueは、円弧を反時計回りに始まりから終わりの角度に向けて描きます。デフォルトは時計回り。

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

Playable code
<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()()メソッドは何ができるのかを示します。

HTML
<canvas id="canvas" width="150" height="200"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 形状を描く
for (i = 0; i < 4; i++){
	for(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 clockwise  = i % 2 == 0 ? false : true;    // 時計回りか反時計回りか
		
		ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
		
		if (i > 1){
			ctx.fill();
		} else {
			ctx.stroke();
		}
	}
}

ScreenshotLive sample

仕様

仕様 状況 コメント
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.arc' in that specification.
Living Standard  

ブラウザの互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (有) (有) (有) (有) (有)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (有) (有) (有) (有) (有) (有)

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

参考情報

ドキュメントのタグと貢献者

 このページの貢献者: FumioNonaka
 最終更新者: FumioNonaka,