HarmonyOS 如何解决canvas设置文字对齐的方法 textAlign不起效果？

参考demo：

// 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 = (-10.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%')
  }
}