From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/canvasrenderingcontext2d/arc/index.html | 179 +++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/ja/web/api/canvasrenderingcontext2d/arc/index.html (limited to 'files/ja/web/api/canvasrenderingcontext2d/arc') diff --git a/files/ja/web/api/canvasrenderingcontext2d/arc/index.html b/files/ja/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..56f9db6d6b --- /dev/null +++ b/files/ja/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

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

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

異なった形状の実例

+ +

以下の例は異なった形を描くことで、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')}} 
+ +

ブラウザの互換性

+ + + +

{{Compat("api.CanvasRenderingContext2D.arc")}}

+ +

Geckoについての注釈

+ +

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

+ + + +

参考情報

+ + -- cgit v1.2.3-54-g00ecf