HarmonyOS 关于使用OffscreenCanvasRenderingContext2D绘制问题

实现圆角就不能再用fillRect这个方法了，这是绘制长方形的，无论如何都是直角

能想到的解决方案就是用moveTo，arcTo，lineTo和stroke去绘制圆角矩形的轮廓，最后填充颜色圆角矩形的实现我这简单写了一个角，可以参考实现

@Entry
@Component
struct FillStyleExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          let offContext = this.offCanvas.getContext("2d", this.settings)
          offContext.fillStyle = 0x0000FF
          offContext.moveTo(100, 20)
          offContext.arcTo(300, 20, 300, 70, 8)
          offContext.lineTo(300, 80)
          offContext.stroke()
          // offContext.fill()
          let image = this.offCanvas.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .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.