HarmonyOS canvas画图问题

代码如下：

struct MeterView {
  // 创建渲染上下文设置和画布渲染上下文
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  // 定义标记中心、标记范围、显示后缀和当前数值
  private markCenter: number = 0;
  private markRange: number = 10;
  private displaySuffix: string = "";
  private _currentNum: number = this.markCenter;
  // 定义画布宽度、高度和其它绘制参数
  private canvasWidth: number = 0;
  private canvasHeight: number = 0;
  private padTop: number = 36;
  private arcSize: number = 50; // 调整后的弧度大小，上下保持一致
  private markTextSize: number = 30;
  private displayTextSize: number = 48;
  private currentPercent: number = 0;
  private percentTo: number = 0;

  // 组件构建函数
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      // 创建画布
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.White)
        .onReady(() => {
          this.canvasWidth = this.context.width;
          this.canvasHeight = this.context.height;
          this.onDraw();
        })
        .borderColor('#5c000000')
        .borderStyle(BorderStyle.Solid)
    }
    .width('100%')
    .height('100%')
  }

  // 绘制函数
  onDraw() {
    const context = this.context;

    context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

    const moveDown = this.canvasHeight / 4;

    // 界面上部绘制
    context.fillStyle = '#D3D3D3'; // 浅灰色
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, this.padTop + moveDown);
    context.quadraticCurveTo(this.canvasWidth / 2, this.padTop - this.arcSize + moveDown, this.canvasWidth,
      this.padTop + moveDown);
    context.lineTo(this.canvasWidth, 0);
    context.closePath();
    context.fill(); // 绿色长刻度线绘制
    context.save();
    context.translate(this.canvasWidth / 2, this.padTop + moveDown);

    context.strokeStyle = '#00FF00'; // 绿色
    context.lineWidth = 3;
    for (let i = -3; i <= 3; i++) {
      const angle = i * (Math.PI / 6); // 每个刻度的角度
      const x1 = this.arcSize * Math.cos(angle); // 起点的x坐标
      const y1 = this.arcSize * Math.sin(angle); // 起点的y坐标
      const x2 = (this.arcSize + 10) * Math.cos(angle); // 终点的x坐标
      const y2 = (this.arcSize + 10) * Math.sin(angle); // 终点的y坐标

      context.beginPath();
      context.moveTo(x1, y1);
      context.lineTo(x2, y2);
      context.stroke();
    }
    context.restore();
    context.save();
    context.translate(this.canvasWidth / 2, this.padTop + moveDown);

    // 绘制灰色的次刻度线
    context.strokeStyle = '#808080'; // 灰色
    context.lineWidth = 2;
    for (let i = -15; i <= 15; i++) {
      if (i % 5 !== 0) {
        const angle = i * (Math.PI / 30); // 每个刻度的角度
        const x1 = (this.arcSize / 2) * Math.cos(angle); // 起点的x坐标
        const y1 = (this.arcSize / 2) * Math.sin(angle); // 起点的y坐标
        const x2 = (this.arcSize / 2 + 10) * Math.cos(angle); // 终点的x坐标
        const y2 = (this.arcSize / 2 + 10) * Math.sin(angle); // 终点的y坐标

        context.beginPath();
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.stroke();
      }
    }
    context.restore();
  }
}
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.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.

绿色长刻度线和短刻度线，怎么绘画在界面上部那个弧线上均匀分布？