HarmonyOS 关于使用OffscreenCanvasRenderingContext2D绘制问题？

Question

绘制了一个矩形，但是不知道如何给这个矩形设置圆角，原始需求是绘制一个圆角是8的矩形

Answer 1

实现圆角就不能再用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%')
  }
}