使用canvas渲染文本时，如何基于文本变化，正确绘制出对应的内容？

@Prop @Watch(‘contentUpdate’)content: string = “” 
 
contentUpdate() { 
this.context.clearRect(0, 0, 200, 200) // 清理画布内容 
this.context.fillText(this.content, 50, 50) // 重新填充 
} 
 
build() { 
Column() { 
Canvas(this.context) 
.width(‘100%’) 
.height(‘25%’) 
.backgroundColor(’#F5DC62’) 
.onReady(() => { 
//可以在这里绘制内容。 
this.context.font = ‘55px sans-serif’ 
this.context.fillText(this.content, 50, 50) 
console.error(“aaa — content=” + this.content) 
}) 
Text(this.content) 
.textAlign(TextAlign.Center)// .backgroundColor(‘gray’) 
.width(‘100%’) 
.height(‘50%’) 
.fontSize(60) 
} 
.borderColor(’#31525B’) 
.borderWidth(12) 
.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.