1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: CanvasRenderingContext2D.ellipse()
slug: Web/API/CanvasRenderingContext2D/ellipse
tags:
- API
- Canvas
- CanvasRenderingContext2D
translation_of: Web/API/CanvasRenderingContext2D/ellipse
---
<div>{{APIRef}} {{SeeCompatTable}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> 是 Canvas 2D API 添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是<em>radiusX</em> 和 <em>radiusY</em> ，按照<em>anticlockwise</em>（默认顺时针）指定的方向，从 <em>startAngle </em> 开始绘制，到 <em>endAngle</em> 结束。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">void <var><em>ctx</em>.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);</var>
</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>x</code></dt>
<dd>椭圆圆心的 x 轴坐标。</dd>
<dt><code>y</code></dt>
<dd>椭圆圆心的 y 轴坐标。</dd>
<dt><code>radius</code>X</dt>
<dd>椭圆长轴的半径。</dd>
<dt><code>radius</code>Y</dt>
<dd>椭圆短轴的半径。</dd>
<dt><code>rotation</code></dt>
<dd>椭圆的旋转角度，以弧度表示(<strong>非角度度数</strong>)。</dd>
<dt><code>startAngle</code></dt>
<dd>将要绘制的起始点角度，从 x 轴测量，以弧度表示(<strong>非角度度数</strong>)。</dd>
<dt><code>endAngle</code></dt>
<dd>椭圆将要绘制的结束点角度，以弧度表示(<strong>非角度度数</strong>)。</dd>
<dt><code>anticlockwise</code> {{optional_inline}}</dt>
<dd>{{jsxref("Boolean")}} 选项，如果为 <code>true</code>，逆时针方向绘制椭圆 （逆时针）， 反之顺时针方向绘制。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="Using_the_ellipse_method" name="Using_the_ellipse_method">使用 <code>ellipse</code> 方法</h3>
<p>这是一段绘制椭圆的简单的代码片段。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="notranslate"><code>var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.setLineDash([]);
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜45°角
ctx.stroke();
ctx.setLineDash([5]);
ctx.moveTo(0,200);
ctx.lineTo(200,0);
ctx.stroke();</code></pre>
<p>修改下面的代码并在线查看 canvas 的变化（如果椭圆没有绘制，请在兼容性列表中检查你的浏览器是否支持）：</p>
<div style="display: none;">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html notranslate"><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.setLineDash([]);
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜45°角
ctx.stroke();
ctx.setLineDash([5]);
ctx.moveTo(0,200);
ctx.lineTo(200,0);
ctx.stroke();</textarea>
</pre>
<pre class="brush: js notranslate">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);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h2 id="规范描述">规范描述</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>接口定义， {{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
