> 文档中心 > HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(十六)arcTo ellipse

HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(十六)arcTo ellipse

arcTo
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。

示例

// xxx.ets@Entry@Componentstruct ArcTo {  private settings: RenderingContextSettings = new RenderingContextSettings(true)  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  build() {    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {      Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{   this.context.moveTo(100, 20)   this.context.arcTo(150, 20, 150, 70, 50)   this.context.stroke() })    }    .width('100%')    .height('100%')  }}

ellipse
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
在规定的矩形区域绘制一个椭圆。
参数:

示例

 

// xxx.ets@Entry@Componentstruct CanvasExample {  private settings: RenderingContextSettings = new RenderingContextSettings(true)  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  build() {    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {      Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{   this.context.beginPath()   this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)   this.context.stroke() })    }    .width('100%')    .height('100%')  }}