1# Circle
2
3The **Circle** component is used to draw a circle.
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
9
10## Child Components
11
12Not supported
13
14
15## APIs
16
17Circle(value?: CircleOptions)
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| value | [CircleOptions](#circleoptions) | No| Options of the circle.|
30
31## CircleOptions
32
33**Widget capability**: This API can be used in ArkTS widgets since API version 9.
34
35**Atomic service API**: This API can be used in atomic services since API version 11.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39| Name| Type| Mandatory| Description|
40| -------- | -------- | -------- | -------- |
41| width | string \| number| No| Width of the circle.<br>Default value: **0**<br>An invalid value is handled as the default value.|
42| height | string \| number| No| Height of the circle.<br>Default value: **0**<br>An invalid value is handled as the default value.|
43
44## Attributes
45
46In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
47
48### fill
49
50fill(value: ResourceColor)
51
52Sets the color of the fill area. An invalid value is handled as the default value.
53
54**Widget capability**: This API can be used in ArkTS widgets since API version 9.
55
56**System capability**: SystemCapability.ArkUI.ArkUI.Full
57
58**Parameters**
59
60| Name| Type                                      | Mandatory| Description                                  |
61| ------ | ------------------------------------------ | ---- | -------------------------------------- |
62| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the fill area.<br>Default value: **Color.Black**|
63
64### fillOpacity
65
66fillOpacity(value: number | string | Resource)
67
68Sets 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**.
69
70**Widget capability**: This API can be used in ArkTS widgets since API version 9.
71
72**System capability**: SystemCapability.ArkUI.ArkUI.Full
73
74**Parameters**
75
76| Name| Type                                                        | Mandatory| Description                          |
77| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
78| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Opacity of the fill area.<br>Default value: **1**|
79
80### stroke
81
82stroke(value: ResourceColor)
83
84Sets 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.
85
86**Widget capability**: This API can be used in ArkTS widgets since API version 9.
87
88**System capability**: SystemCapability.ArkUI.ArkUI.Full
89
90**Parameters**
91
92| Name| Type                                      | Mandatory| Description      |
93| ------ | ------------------------------------------ | ---- | ---------- |
94| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Stroke color.|
95
96### strokeDashArray
97
98strokeDashArray(value: Array&lt;any&gt;)
99
100Sets stroke dashes. An invalid value is handled as the default value.
101
102**Widget capability**: This API can be used in ArkTS widgets since API version 9.
103
104**System capability**: SystemCapability.ArkUI.ArkUI.Full
105
106**Parameters**
107
108| Name| Type            | Mandatory| Description                     |
109| ------ | ---------------- | ---- | ------------------------- |
110| value  | Array&lt;any&gt; | Yes  | Stroke dashes.<br>Default value: **[]**|
111
112### strokeDashOffset
113
114strokeDashOffset(value: number | string)
115
116Sets the offset of the start point for drawing the stroke. An invalid value is handled as the default value.
117
118**Widget capability**: This API can be used in ArkTS widgets since API version 9.
119
120**System capability**: SystemCapability.ArkUI.ArkUI.Full
121
122**Parameters**
123
124| Name| Type                      | Mandatory| Description                                |
125| ------ | -------------------------- | ---- | ------------------------------------ |
126| value  | number \| string | Yes  | Offset of the start point for drawing the stroke.<br>Default value: **0**|
127
128### strokeLineCap
129
130strokeLineCap(value: LineCapStyle)
131
132Sets the cap style of the stroke.
133
134**Widget capability**: This API can be used in ArkTS widgets since API version 9.
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 **Circle** component, which does not have corners.
149
150**Widget capability**: This API can be used in ArkTS widgets since API version 9.
151
152**System capability**: SystemCapability.ArkUI.ArkUI.Full
153
154**Parameters**
155
156| Name| Type                                               | Mandatory| Description                                              |
157| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
158| value  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes  | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
159
160### strokeMiterLimit
161
162strokeMiterLimit(value: number | string)
163
164Sets 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 **Circle** component, which does not have a miter join.
165
166**Widget capability**: This API can be used in ArkTS widgets since API version 9.
167
168**System capability**: SystemCapability.ArkUI.ArkUI.Full
169
170**Parameters**
171
172| Name| Type                      | Mandatory| Description                                          |
173| ------ | -------------------------- | ---- | ---------------------------------------------- |
174| value  | number \| 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**|
175
176### strokeOpacity
177
178strokeOpacity(value: number | string | Resource)
179
180Sets 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**.
181
182**Widget capability**: This API can be used in ArkTS widgets since API version 9.
183
184**System capability**: SystemCapability.ArkUI.ArkUI.Full
185
186**Parameters**
187
188| Name| Type                                                        | Mandatory| Description                      |
189| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
190| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Stroke opacity.<br>Default value: **1**|
191
192### strokeWidth
193
194strokeWidth(value: Length)
195
196Sets the stroke width. If of the string type, this attribute cannot be set in percentage. A percentage is processed as 1 px.
197
198**Widget capability**: This API can be used in ArkTS widgets since API version 9.
199
200**System capability**: SystemCapability.ArkUI.ArkUI.Full
201
202**Parameters**
203
204| Name| Type                        | Mandatory| Description                    |
205| ------ | ---------------------------- | ---- | ------------------------ |
206| value  | [Length](ts-types.md#length) | Yes  | Stroke width.<br>Default value: **1**|
207
208### antiAlias
209
210antiAlias(value: boolean)
211
212Specifies whether anti-aliasing is enabled.
213
214**Widget capability**: This API can be used in ArkTS widgets since API version 9.
215
216**System capability**: SystemCapability.ArkUI.ArkUI.Full
217
218**Parameters**
219
220| Name| Type   | Mandatory| Description                                 |
221| ------ | ------- | ---- | ------------------------------------- |
222| value  | boolean | Yes  | Whether anti-aliasing is enabled.<br>Default value: **true**|
223
224## Example
225
226```ts
227// xxx.ets
228@Entry
229@Component
230struct CircleExample {
231  build() {
232    Column({ space: 10 }) {
233      // Draw a circle whose diameter is 150.
234      Circle({ width: 150, height: 150 })
235      // Draw a circle whose diameter is 150 and stroke color is red. (If the width and height values are different, the smaller value will be used as the diameter.)
236      Circle()
237        .width(150)
238        .height(200)
239        .fillOpacity(0)
240        .strokeWidth(3)
241        .stroke(Color.Red)
242        .strokeDashArray([1, 2])
243    }.width('100%')
244  }
245}
246```
247
248![en-us_image_0000001219744191](figures/en-us_image_0000001219744191.png)
249