HarmonyOS使用canvas如何使文字垂直居中

// xxx.ets 
@Entry 
@Component 
struct 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.fillStyle = '#0000ff' 
          this.context.font = '18vp' 
          this.context.fillStyle = Color.Black 
          this.context.textAlign = 'center' 
          this.context.textBaseline = 'middle' 
          let str = (-12.3456).toFixed(2) 
          let metrics = this.context.measureText(str) 
          this.context.fillStyle = Color.Green 
          //这里把文字显示的区域绘制出来 
          this.context.fillRect(10, (this.context.height - metrics.height)/2, metrics.width, metrics.height) 
          this.context.fillStyle = Color.Black 
          //这里把文字绘制出来 
          this.context.fillText(str,10+(metrics.width/2), (this.context.height)/2) 
        }) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}