HarmonyOS 鸿蒙Next 服务卡片app中使用自定义字体，如何用画布描绘并转出成图片

使用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();
  }
}