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

// 形状を描く
// (訳注:横に 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 の定義
現行の標準  

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

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

参考情報

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

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