HarmonyOS 鸿蒙Next Canvas组件画线，如何清空画布，代码如下

HarmonyOS 鸿蒙Next Canvas组件画线，如何清空画布，代码如下 代码如下，在onDrawInit方法中，每次都执行了清空画布的操作，但是貌似不生效，导致图片重叠问题，如图～

代码如下，在onDrawInit方法中，每次都执行了清空画布的操作，但是貌似不生效，导致图片重叠问题。

import { canvasInfo, canvas_option } from '../oldModel/TestModel_2'

@Entry
@Component
struct McLineChart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  public offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(400, 400, this.settings);
  @State options: canvasInfo = {}
  private pageSize = 20 //屏幕默认显示个数
  private space = 0 //坐标点的间距
  @State @Watch('onDrawInit') startIndex: number = 0 // 起始坐标点的索引
  @State panIndex: number = 0 // 记录上次的起始索引
  @State offsetX: number = 0 // 记录在手指移动过程中,移动的距离
  private min: number = Number.MAX_VALUE //最小值
  private max = 0 //最大值
  // 拖动方向只允许左右移动，
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })

  aboutToAppear() {
    this.options = canvas_option
  }

  onDrawInit() {
    this.offContext.clearRect(0, 0, 400, 400);

    this.context.lineWidth = 3
    this.context.lineJoin = 'round'
    if (this.startIndex <= 0) {
      this.startIndex = 0
    }
    let endIndex = this.startIndex + this.pageSize
    if (endIndex > this.options.data!.length) {
      endIndex = this.options.data!.length
    }
    //需要显示的数据
    let viewData = this.options.data!.slice(this.startIndex, endIndex)
    viewData.forEach((item, index) => {
      if (item.value! < this.min) {
        this.min = item.value!
      }
      if (item.value! > this.max) {
        this.max = item.value!
      }
    })
    this.space = 400 / (this.pageSize - 1)
    let pxPerNumber = 400 / (this.max - this.min)
    // this.offContext.clearRect(0, 0, 400, 400)
    this.context.beginPath()
    viewData.forEach((item, index) => {
      let x = this.space * (index)
      let y = 400 - item.value!
      if (index == 0) {
        this.offContext.moveTo(x, y)
      } else {
        this.offContext.lineTo(x, y)
      }
    })
    this.offContext.stroke()
    let image = this.offContext.transferToImageBitmap()
    this.context.transferFromImageBitmap(image)
  }

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('50%')
        .backgroundColor('#C0C0C0')
        .onReady(() => {
          this.onDrawInit()
        })
        .gesture(
          PanGesture(this.panOption)
            .onActionStart((event: GestureEvent) => {
            })
            .onActionUpdate((event: GestureEvent) => {
              console.debug(TAG, `手指移动 -> ${event.offsetX}`)
              if (Math.abs(this.offsetX - event.offsetX) < 20) {
                return
              }
              if (this.startIndex >= this.options.data!.length - this.pageSize) {
                this.startIndex = this.options.data!.length - this.pageSize
              }

              if (Math.abs(event.offsetX) > 20) {
                // this.startIndex = Math.floor(this.panIndex - event.offsetX / 20)
                this.startIndex = this.startIndex - Math.round((event.offsetX - this.offsetX) / 20)
                console.debug(TAG, `startIndex -> ${this.startIndex}`)
              }
              this.offsetX = event.offsetX
            })
            .onActionEnd(() => {
              this.panIndex = this.startIndex
            })
        )
      Text(`左侧起始坐标索引${this.startIndex.toString()}`)
    }
  }
}

const TAG: string = 'Pan手势'