HarmonyOS 环形渐变canvas实现方式

Canvas中可以使用arc绘制隐藏下半部分白色区域

边缘圆角this.context.lineCap = ‘round’，

渐变圆弧createLinearGradient

// xxx.ets
@Entry
@Component
struct Arc {
  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('100%')
        .height('100%')
        .backgroundColor('#ffffff')
        .onReady(() =>{
          this.context.beginPath()

          this.context.lineWidth = 10
          let grad = this.context.createLinearGradient(50,0, 300,100)
          grad.addColorStop(0.0, '#ff0000')
          grad.addColorStop(0.2, '#ffff00')
          grad.addColorStop(0.5, '#00ff00')
          this.context.strokeStyle = grad
          this.context.lineCap = 'round'
          this.context.arc(100, 75, 50, 3.14, 0)
          this.context.stroke()
        })
    }
    .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.

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5#arc