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

lineCap 、 lineJoin 、 miterLimit

lineCap

代码

// xxx.ets@Entry@Componentstruct LineCapExample {  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 = 8   this.context.beginPath()   this.context.lineCap = 'round'   this.context.moveTo(30, 50)   this.context.lineTo(220, 50)   this.context.stroke() })    }    .width('100%')    .height('100%')  }}

效果

lineJoin

代码

// xxx.ets@Entry@Componentstruct LineJoinExample {  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.lineWidth = 8 this.context.lineJoin = 'miter' this.context.moveTo(30, 30) this.context.lineTo(120, 60) this.context.lineTo(30, 110) this.context.stroke()      })    }    .width('100%')    .height('100%')  }}

 效果

miterLimit

代码

// xxx.ets@Entry@Componentstruct MiterLimit {  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 = 8   this.context.lineJoin = 'miter'   this.context.miterLimit = 3   this.context.moveTo(30, 30)   this.context.lineTo(60, 35)   this.context.lineTo(30, 37)   this.context.stroke()      })    }    .width('100%')    .height('100%')  }}

效果 

医疗百科