HarmonyOS 自定义组件如何绘制一个三角

可以根据文字内容长度来计算canvas的宽度，参考示例：

// xxx.ets
@Entry
@Component
struct Clip {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
  @State fillText: string = 'Canvas Clip'
  //获取文本长度*字体大小 +20是预留三角形位置，可根据效果自定义
  @State canvasWidth: number = this.fillText.length * px2vp(80) + 20

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .height(50)
        .width(this.canvasWidth)
        .backgroundColor(Color.Red)
        .onReady(() => {
          let offContext = this.offCanvas.getContext("2d", this.settings)
          let region = new Path2D()
          region.moveTo(this.canvasWidth - 20, 25) //三角形顶点位置
          region.lineTo(this.canvasWidth, 0) //三角形上底角位置
          region.lineTo(this.canvasWidth, 50) //三角形下底角位置
          region.closePath()
          offContext.clip(region, "evenodd")
          offContext.fillStyle = Color.White
          offContext.fillRect(0, 0, 200, 200)
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
          this.context.font = '80px sans-serif bolder'
          this.context.fillStyle = Color.White
          this.context.fillText(this.fillText, 0, 35)
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}