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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.