1# Circle
2
3 The **\<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(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**Parameters**
22
23| Name| Type| Mandatory| Description|
24| -------- | -------- | -------- | -------- |
25| width | string \| number | No| Width of the circle.<br>Default value: **0**<br>**NOTE**<br>An invalid value is handled as the default value.|
26| height | string \| number | No| Height of the circle.<br>Default value: **0**<br>**NOTE**<br>An invalid value is handled as the default value.|
27
28## Attributes
29
30In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
31
32### fill
33
34fill(value: ResourceColor)
35
36Sets the color of the fill area. An invalid value is handled as the default value.
37
38**Widget capability**: This API can be used in ArkTS widgets since API version 9.
39
40**System capability**: SystemCapability.ArkUI.ArkUI.Full
41
42**Parameters**
43
44| Name| Type                                      | Mandatory| Description                                  |
45| ------ | ------------------------------------------ | ---- | -------------------------------------- |
46| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the fill area.<br>Default value: **Color.Black**|
47
48### fillOpacity
49
50fillOpacity(value: number | string | Resource)
51
52Sets 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**.
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  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Opacity of the fill area.<br>Default value: **1**|
63
64### stroke
65
66stroke(value: ResourceColor)
67
68Sets 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.
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  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Stroke color.|
79
80### strokeDashArray
81
82strokeDashArray(value: Array&lt;any&gt;)
83
84Sets stroke dashes. An invalid value is handled as the default value.
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  | Array&lt;any&gt; | Yes  | Stroke dashes.<br>Default value: **[]**|
95
96### strokeDashOffset
97
98strokeDashOffset(value: number | string)
99
100Sets the offset of the start point for drawing the stroke. 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  | number \| string | Yes  | Offset of the start point for drawing the stroke.<br>Default value: **0**|
111
112### strokeLineCap
113
114strokeLineCap(value: LineCapStyle)
115
116Sets the cap style of the stroke.
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  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes  | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**|
127
128### strokeLineJoin
129
130strokeLineJoin(value: LineJoinStyle)
131
132Sets the join style of the stroke. This attribute does not work for the **\<Circle>** component, which does not have corners.
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  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes  | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
143
144### strokeMiterLimit
145
146strokeMiterLimit(value: number | string)
147
148Sets 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, because it does not have a miter join.
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  | 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**|
159
160### strokeOpacity
161
162strokeOpacity(value: number | string | Resource)
163
164Sets 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**.
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 \| [Resource](ts-types.md#resource) | Yes  | Stroke opacity.<br>Default value: **1**|
175
176### strokeWidth
177
178strokeWidth(value: Length)
179
180Sets the stroke width. If of the string type, this attribute cannot be set in percentage. A percentage is processed as 1 px.
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  | [Length](ts-types.md#length) | Yes  | Stroke width.<br>Default value: **1**|
191
192### antiAlias
193
194antiAlias(value: boolean)
195
196Specifies whether anti-aliasing is enabled.
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  | boolean | Yes  | Whether anti-aliasing is enabled.<br>Default value: **true**|
207
208## Example
209
210```ts
211// xxx.ets
212@Entry
213@Component
214struct CircleExample {
215  build() {
216    Column({ space: 10 }) {
217      // Draw a circle whose diameter is 150.
218      Circle({ width: 150, height: 150 })
219      // 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.)
220      Circle()
221        .width(150)
222        .height(200)
223        .fillOpacity(0)
224        .strokeWidth(3)
225        .stroke(Color.Red)
226        .strokeDashArray([1, 2])
227    }.width('100%')
228  }
229}
230```
231
232![en-us_image_0000001219744191](figures/en-us_image_0000001219744191.png)
233