HarmonyOS canvas如何实现画线跟手效果

可以参考如下demo实现

@Entry
@Preview@Component
struct MyCanvas {
  private context01: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true));

  // 是否开始绘画
  private isDraw: boolean = false;
  // 坐标点集合
  private zbList: zbClass[] = [];
  // 上一个坐标点的 x 坐标
  private context01X: number = 0;
  // 上一个坐标点的 y 坐标
  private context01Y: number = 0;

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context01)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.White)
        .onTouch((event: TouchEvent) => {
          // 按下时触发，开始绘画
          if (event.type === TouchType.Down) {
            this.isDraw = true;
            this.context01X = event.touches[0].x;
            this.context01Y = event.touches[0].y;
            this.zbList.push({ x: this.context01X, y: this.context01Y, isStart: true });
            this.context01.beginPath();
          }
          // 移动时触发，正在绘画
          if (event.type === TouchType.Move && this.isDraw) {
            this.drawing(event.touches[0].x, event.touches[0].y);
          }
          // 抬起时触发，结束绘画
          if (event.type === TouchType.Up) {
            this.isDraw = false;
            this.zbList.push({ x: event.touches[0].x, y: event.touches[0].y, isStart: false });
            this.context01.closePath();
          }
        })
        .onReady(() => {
          // 设置绘画边框宽度
          this.context01.lineWidth = 5;
        });
    }
    .width('100%')
    .height('100%');
  }

  // 绘画过程
  drawing(x: number, y: number) {
    // 先移动画笔到起始点
    this.context01.moveTo(this.context01X, this.context01Y);
    // 将画笔从上一个坐标链接到手指移动到的新坐标
    this.context01.lineTo(x, y);
    // 更新常量坐标点为手指移动坐标点，随着手指移动，形成循环
    this.context01X = x;
    this.context01Y = y;
    // 保存坐标点
    this.zbList.push({ x: x, y: y });
    this.context01.stroke();
  }
}

// 坐标对象
class zbClass {
  x: number = 0;
  y: number = 0;
  // 按下时记录 true，移动时不记录，抬起时记录 false
  isStart?: boolean = false;
}