--- title: CanvasRenderingContext2D.arc() slug: Web/API/CanvasRenderingContext2D/arc tags: - API - Canvas - CanvasRenderingContext2D - Method - Reference translation_of: Web/API/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_inline}}: 省略可能な{{jsxref("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の中身がどう変わるか実際に確かめられます。

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');

// 形状を描く
// (訳注:横に 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();
		}
	}
}

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}

仕様

仕様	状況	コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}	{{Spec2('HTML WHATWG')}}

ブラウザの互換性

Geckoについての注釈

Gecko 2.0{{geckoRelease("2.0")}}より:

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

参考情報

このメソッドのインターフェース {{domxref("CanvasRenderingContext2D")}}

構文

引数

例

arc()メソッドの使い方

HTML

JavaScript

Playable code

異なった形状の実例

HTML

JavaScript

仕様

ブラウザの互換性

Geckoについての注釈

参考情報

`arc()`メソッドの使い方