Canvas组件，在setInterval内绘制不起作用

**【任务描述】**
使用[Canvas](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md)组件，在onReady的回调里边，我想使用setInterval方法定时绘制，但是实际测试不起作用呀，测试代码如下：

```
@Entry
@Component
struct Index {
  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.fillRect(20, 160, 150, 100)

var progress = 10;
          this.context.lineWidth = 4;

var id = setInterval(() => {
            // 绘制进度
            this.context.arc(130, 330, 45, 0, progress / 100 * Math.PI * 2);
            this.context.stroke()
            progress += 10;
            if(progress > 100) {
              clearInterval(id)
            }
          },1000);
        })
    }
    .width('100%')
    .height('100%')
  }
}
```

运行结果如下：
![输入图片说明](https://images.gitee.com/uploads/images/2022/0426/120019_d0117e23_4965114.png "issues.png")

请问：是我使用的方式不对吗？还是说目前Canvas不可以这样使用喃？希望专家们指点一下，多谢啦

我用的环境如下：
IDE: DevEco Studio 3.0 Beta3 for OpenHarmony(Build Version: 3.0.0.900, built on March 30, 2022)
SDK: API 8 (3.1.5.5)

**【解决方案】**

**【任务来源】**

OpenHarmony/docs
Closed

Content Risk Flag

Comments (5)

OpenHarmony/docsClosed .gitee-modal { width: 500px !important; }

Content Risk Flag