HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象（十七）

rect
rect(x: number, y: number, w: number, h: number): 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.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)   this.context.stroke() })    }    .width('100%')    .height('100%')  }}

fill
fill(fillRule?: CanvasFillRule): void
对封闭路径进行填充。

示例

// xxx.ets@Entry@Componentstruct Fill {  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.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)   this.context.fill() })    }    .width('100%')    .height('100%')  }}