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

fillStyle

代码：

// xxx.ets@Entry@Componentstruct FillStyleExample {  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.fillStyle = '#0000ff'   this.context.fillRect(20, 160, 150, 100) })    }    .width('100%')    .height('100%')  }}

效果

lineWidth

代码

// xxx.ets@Entry@Componentstruct LineWidthExample {  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.lineWidth = 5 this.context.strokeRect(25, 25, 85, 105)      })    }    .width('100%')    .height('100%')  }}

效果

strokeStyle

代码

// xxx.ets@Entry@Componentstruct StrokeStyleExample {  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.lineWidth = 10   this.context.strokeStyle = '#0000ff'   this.context.strokeRect(25, 25, 155, 105) })    }    .width('100%')    .height('100%')  }}

效果：