HarmonyOS 鸿蒙Next Canvas绘制内容怎么更新

对于Canvas组件，只要调用绘制接口就会触发刷新。
对于Canvas组件上的图像，已经绘制出来后便不会再改变，可以使用reset重置，或者clearRect清除局部再重绘。

具体可以将变化的数据通过[@Watch](/user/Watch)监听，同时绑定一个自己封装的draw()方法，当数据刷新时就会调用Watch绑定的方法执行绘制逻辑。如下：

@Entry
@Component
struct CanvasDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State @Watch('draw')content: string = ""
  
  draw() {
    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)
        })
      TextInput({
        text:$$this.content
      })
    }
    .borderColor('#31525B')
    .borderWidth(12)
    .width('100%')
    .height('100%')
  }
}