HarmonyOS 如何根据圆心坐标画实心圆？

Question

目前计算出了圆心的坐标集合如下：

@State centersX:Array<number> = [] //存放的为圆的X坐标集合   
@State centersY:Array<number> = [] // 存放的为圆的Y坐标集合 

centersX 的值为：21 、31、 41 、51 、61 、71 、82 、92、102。

centersY 的值为：43 、43 、 43 、 126 、126 、126 、126 、15 126。

请根据centersX和centersY的值在Column布局中画出8个半径为2VP的圆。

Answer 1

根据坐标绘制实心圆，可以使用arc接口，并使用fill进行填充颜色，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5\#arc

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

参考demo：

@Entry
@Component
struct Arc {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State centersX:Array<number> = [21,31,41,51,61,71,82,92,102] //存放的为圆的X坐标集合
  @State centersY:Array<number> = [43,43,43,126,126,126,126,15,126] // 存放的为圆的Y坐标集合

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.centersX.forEach((value,index) => {
            this.context.beginPath()
            this.context.strokeStyle = '#00ff00'
            this.context.fillStyle = '#00ff00'
            this.context.moveTo(this.centersX[index], this.centersY[index])
            this.context.arc(this.centersX[index], this.centersY[index], 3, 0, 7)
            this.context.fill()
            this.context.stroke()
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}