HarmonyOS 怎么画圆形？

Question

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5\#fillstyle

文档中只看到了fillRect方法，有没有可以画圆形的方法呢，并且可以自定义填充的颜色

Answer 1

参考demo

@Entry
@Component
struct Page119 {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      Canvas(this.context)
        .width('90%')
        .height(300)
        .backgroundColor(Color.Grey)
        .onReady(() => {
          let radius = 50; //圆角弧度
          let x = 40; //左上角坐标x
          let y = 40; //左上角坐标y
          let width = 100; //矩形宽
          let height = 100; //矩形高
          this.context.beginPath();
          this.context.moveTo(x + radius, y);
          this.context.lineTo(x + width - radius, y);
          this.context.arcTo(x + width, y, x + width, y + radius, radius);
          this.context.lineTo(x + width, y + height - radius);
          this.context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
          this.context.lineTo(x + radius, y + height);
          this.context.arcTo(x, y + height, x, y + height - radius, radius);
          this.context.lineTo(x, y + radius);
          this.context.arcTo(x, y, x + radius, y, radius);
          this.context.closePath();
          this.context.fillStyle = '#0097D4';
          this.context.fill();
        })
    }
    .width('100%')
    .height('100%')
  }
}