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 \| string \| [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<any>) 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<any> | 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 \| 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 \| 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 \| string \| [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 258