频繁使用CanvasRenderingContext2D或OffscreenCanvasRenderingContext2D中的drawImage方法，会出现卡顿掉帧

import image from '@ohos.multimedia.image' 
import display from '@ohos.display' 
 
 
@Entry 
@Component 
struct Index { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  private settings2: RenderingContextSettings = new RenderingContextSettings(true) 
  private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings2) 
  @State imageScale: number = 1 
 
  typedArrayToBuffer(array: Uint8Array): ArrayBuffer { 
    return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset) 
  } 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Text("放大镜区域") 
      Canvas(this.context2).width(100).height(100).backgroundColor(Color.Black) 
      Text("显示区域") 
      Canvas(this.context) 
        .width('100%') 
        .aspectRatio(1) 
        .backgroundColor('#ffff00') 
        .onTouch((e: TouchEvent) => { 
          let pixelMap = this.context.getPixelMap(e.touches[0].x - 10, e.touches[0].y - 10, 20, 20) 
          if (pixelMap) { 
            this.context2.drawImage(pixelMap, 0, 0, 100, 100) 
          } 
        }) 
        .onReady(() => { 
            .onReady(() => { 
              getContext(this).resourceManager.getMediaContent($r("app.media.icon")).then((data) => { 
                let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset) 
                let imageSource: image.ImageSource = image.createImageSource(arrayBuffer); 
                imageSource.getImageInfo((err, value) => { 
                  if (err) { 
                    // onErrorFunction(err); 
                    return; 
                  } 
                  let opts: image.DecodingOptions = { 
                    editable: true, 
                    desiredSize: { 
                      height: value.size.height, 
                      width: value.size.width 
                    } 
                  }; 
                  imageSource.createPixelMap(opts, (err, pixelMap) => { 
                    if (err) { 
                      // onErrorFunction(err); 
                    } else { 
                      this.imageScale = display.getDefaultDisplaySync().width / value.size.width 
                      this.context.transform(this.imageScale, 0, 0, this.imageScale, 0, 0) 
                      this.context.drawImage(pixelMap, 0, 0) 
                    } 
                  }) 
                }) 
              }) 
            }) 
        } 
          .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.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.