1# Ellipse
2
3The **Ellipse** component is used to draw an ellipse.
4
5>  **NOTE**
6>
7>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8> This API can be used in atomic services since API version 11.
9
10## Child Components
11
12Not supported
13
14
15## APIs
16
17Ellipse(options?: {width?: string | number, height?: string | number})
18
19**Widget capability**: This API can be used in ArkTS widgets since API version 9.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name| Type| Mandatory| Description|
28| -------- | -------- | -------- | -------- |
29| width | string \| number | No| Width.<br>Default value: **0**<br>An invalid value is handled as the default value.|
30| height | string \| number | No| Height.<br>Default value: **0**<br>An invalid value is handled as the default value.|
31
32## Attributes
33
34In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
35
36### fill
37
38fill(value: ResourceColor)
39
40Sets the color of the fill area. An invalid value is handled as the default value.
41
42**Widget capability**: This API can be used in ArkTS widgets since API version 9.
43
44**Atomic service API**: This API can be used in atomic services since API version 11.
45
46**System capability**: SystemCapability.ArkUI.ArkUI.Full
47
48**Parameters**
49
50| Name| Type                                      | Mandatory| Description                                  |
51| ------ | ------------------------------------------ | ---- | -------------------------------------- |
52| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the fill area.<br>Default value: **Color.Black**|
53
54### fillOpacity
55
56fillOpacity(value: number | string | Resource)
57
58Sets the opacity of the fill area. The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.
59
60**Widget capability**: This API can be used in ArkTS widgets since API version 9.
61
62**Atomic service API**: This API can be used in atomic services since API version 11.
63
64**System capability**: SystemCapability.ArkUI.ArkUI.Full
65
66**Parameters**
67
68| Name| Type                                                        | Mandatory| Description                          |
69| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
70| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | Yes  | Opacity of the fill area.<br>Default value: **1**|
71
72### stroke
73
74stroke(value: ResourceColor)
75
76Sets the stroke color. If this attribute is not set, the component does not have any stroke. If the value is invalid, no stroke will be drawn.
77
78**Widget capability**: This API can be used in ArkTS widgets since API version 9.
79
80**Atomic service API**: This API can be used in atomic services since API version 11.
81
82**System capability**: SystemCapability.ArkUI.ArkUI.Full
83
84**Parameters**
85
86| Name| Type                                      | Mandatory| Description      |
87| ------ | ------------------------------------------ | ---- | ---------- |
88| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Stroke color.|
89
90### strokeDashArray
91
92strokeDashArray(value: Array&lt;any&gt;)
93
94Sets stroke dashes. An invalid value is handled as the default value.
95
96**Widget capability**: This API can be used in ArkTS widgets since API version 9.
97
98**Atomic service API**: This API can be used in atomic services since API version 11.
99
100**System capability**: SystemCapability.ArkUI.ArkUI.Full
101
102**Parameters**
103
104| Name| Type            | Mandatory| Description                     |
105| ------ | ---------------- | ---- | ------------------------- |
106| value  | Array&lt;any&gt; | Yes  | Stroke dashes.<br>Default value: **[]**|
107
108### strokeDashOffset
109
110strokeDashOffset(value: number | string)
111
112Sets the offset of the start point for drawing the stroke. An invalid value is handled as the default value.
113
114**Widget capability**: This API can be used in ArkTS widgets since API version 9.
115
116**Atomic service API**: This API can be used in atomic services since API version 11.
117
118**System capability**: SystemCapability.ArkUI.ArkUI.Full
119
120**Parameters**
121
122| Name| Type                      | Mandatory| Description                                |
123| ------ | -------------------------- | ---- | ------------------------------------ |
124| value  | number&nbsp;\|&nbsp;string | Yes  | Offset of the start point for drawing the stroke.<br>Default value: **0**|
125
126### strokeLineCap
127
128strokeLineCap(value: LineCapStyle)
129
130Sets the cap style of the stroke.
131
132**Widget capability**: This API can be used in ArkTS widgets since API version 9.
133
134**Atomic service API**: This API can be used in atomic services since API version 11.
135
136**System capability**: SystemCapability.ArkUI.ArkUI.Full
137
138**Parameters**
139
140| Name| Type                                             | Mandatory| Description                                            |
141| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
142| value  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes  | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**|
143
144### strokeLineJoin
145
146strokeLineJoin(value: LineJoinStyle)
147
148Sets the join style of the stroke. This attribute does not work for the **Ellipse** component, which does not have corners.
149
150**Widget capability**: This API can be used in ArkTS widgets since API version 9.
151
152**Atomic service API**: This API can be used in atomic services since API version 11.
153
154**System capability**: SystemCapability.ArkUI.ArkUI.Full
155
156**Parameters**
157
158| Name| Type                                               | Mandatory| Description                                              |
159| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
160| value  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes  | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
161
162### strokeMiterLimit
163
164strokeMiterLimit(value: number | string)
165
166Sets the limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. This attribute does not take effect for the **Ellipse** component, because it does not have a miter join.
167
168**Widget capability**: This API can be used in ArkTS widgets since API version 9.
169
170**Atomic service API**: This API can be used in atomic services since API version 11.
171
172**System capability**: SystemCapability.ArkUI.ArkUI.Full
173
174**Parameters**
175
176| Name| Type                      | Mandatory| Description                                          |
177| ------ | -------------------------- | ---- | ---------------------------------------------- |
178| value  | number&nbsp;\|&nbsp;string | Yes  | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Default value: **4**|
179
180### strokeOpacity
181
182strokeOpacity(value: number | string | Resource)
183
184Sets the stroke opacity. The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.
185
186**Widget capability**: This API can be used in ArkTS widgets since API version 9.
187
188**Atomic service API**: This API can be used in atomic services since API version 11.
189
190**System capability**: SystemCapability.ArkUI.ArkUI.Full
191
192**Parameters**
193
194| Name| Type                                                        | Mandatory| Description                      |
195| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
196| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | Yes  | Stroke opacity.<br>Default value: **1**|
197
198### strokeWidth
199
200strokeWidth(value: Length)
201
202Sets the stroke width. If of the string type, this attribute cannot be set in percentage. A percentage is processed as 1 px.
203
204**Widget capability**: This API can be used in ArkTS widgets since API version 9.
205
206**Atomic service API**: This API can be used in atomic services since API version 11.
207
208**System capability**: SystemCapability.ArkUI.ArkUI.Full
209
210**Parameters**
211
212| Name| Type                        | Mandatory| Description                    |
213| ------ | ---------------------------- | ---- | ------------------------ |
214| value  | [Length](ts-types.md#length) | Yes  | Stroke width.<br>Default value: **1**|
215
216### antiAlias
217
218antiAlias(value: boolean)
219
220Specifies whether anti-aliasing is enabled.
221
222**Widget capability**: This API can be used in ArkTS widgets since API version 9.
223
224**Atomic service API**: This API can be used in atomic services since API version 11.
225
226**System capability**: SystemCapability.ArkUI.ArkUI.Full
227
228**Parameters**
229
230| Name| Type   | Mandatory| Description                                 |
231| ------ | ------- | ---- | ------------------------------------- |
232| value  | boolean | Yes  | Whether anti-aliasing is enabled.<br>Default value: **true**|
233
234## Example
235
236```ts
237// xxx.ets
238@Entry
239@Component
240struct EllipseExample {
241  build() {
242    Column({ space: 10 }) {
243      // Draw a 150 x 80 ellipse.
244      Ellipse({ width: 150, height: 80 })
245      // Draw a 150 x 100 ellipse with blue strokes.
246      Ellipse()
247        .width(150)
248        .height(100)
249        .fillOpacity(0)
250        .stroke(Color.Blue)
251        .strokeWidth(3)
252    }.width('100%')
253  }
254}
255```
256
257![en-us_image_0000001174104394](figures/en-us_image_0000001174104394.png)
258