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の中身がどう変わるか実際に確かめられます。
異なった形状の実例
以下の例は異なった形を描くことで、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();
}
}
}
Screenshot | Live sample |
---|---|
![]() |
仕様
仕様 | 状況 | コメント |
---|---|---|
HTML Living Standard CanvasRenderingContext2D.arc の定義 |
現行の標準 |
ブラウザの互換性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
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