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 | 218 +++++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html (limited to 'files/zh-cn/web/api/canvasrenderingcontext2d/arc') diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..05b8ea3b62 --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,218 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

+ +

语法

+ +
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+ +

Parameters

+ +
+
x
+
圆弧中心（圆心）的 x 轴坐标。
+
y
+
圆弧中心（圆心）的 y 轴坐标。
+
radius
+
圆弧的半径。
+
startAngle
+
圆弧的起始点， x轴方向开始计算，单位以弧度表示。
+
endAngle
+
圆弧的终点， 单位以弧度表示。
+
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');
+
+// Draw shapes
+for (i=0;i<4;i++){
+  for(j=0;j<3;j++){
+    ctx.beginPath();
+    var x          = 25+j*50;               // x coordinate
+    var y          = 25+i*50;               // y coordinate
+    var radius     = 20;                    // Arc radius
+    var startAngle = 0;                     // Starting point on circle
+    var endAngle   = Math.PI+(Math.PI*j)/2; // End point on circle
+    var clockwise  = i%2==0 ? false : true; // clockwise or anticlockwise
+
+    ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
+
+    if (i>1){
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}
+ +

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

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Gecko-specific 注解

+ +

从 Gecko 2.0 {{geckoRelease("2.0")}}开始：

+ + + +

参见

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