鸿蒙Next一文了解Canvas绘制文字基线 原创 精华

使用Canvas绘制文字时，通常需要设置文字的对齐方式。官方文档解释：textBaseline设置文本绘制中的水平对齐方式，textAlign设置文本绘制中的文本对齐方式。
通俗地说：
textBaseline设置文字基于绘制坐标点垂直方向的对齐方式
textAlign设置文字基于绘制坐标点水平方向的对齐方式
使用Canvas绘制文字的方法：
fillText(text: string, x: number, y: number)
text:需要绘制的文本内容
x,y:需要绘制的文本的左下角坐标
了解以上基础属性，通过直观的绘制效果，看一下文字和绘制坐标的关系：

上图中，红色圆点是文字绘制的坐标点，上边是textBaseline的6个属性值所对应的文字位置，中间部分是textAlign的5个属性所对应的文字位置。通过坐标系和绘制点可以直观的看到文字和坐标点的相对位置。
注意：
textAlign的水平方向的位置很容易理解
textBaseline的基线位置，找了一张图片供参考

源码：

@Entry
@ComponentV2
struct CanvasDrawText{
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Stack(){
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .onReady(()=>{
          this.context.lineWidth = 0.5;
          this.context.strokeStyle = Color.Black;
          //绘制网格
          for (let i = 0; i < this.context.width / 20; i++) {
            this.context.beginPath()
            this.context.moveTo(i*20, 0)
            this.context.lineTo(i*20, this.context.height);
            this.context.stroke();
          }
          for (let i = 0; i < this.context.height / 20; i++) {
            this.context.beginPath()
            this.context.moveTo(0,i*20)
            this.context.lineTo(this.context.height,i*20);
            this.context.stroke();
          }
          this.context.lineWidth =3;
          this.context.strokeStyle = Color.Red;

          //绘制 垂直方向 5个参考点
          this.context.beginPath();
          this.context.arc(200, 200, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(200, 260, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(200, 320, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(200, 380, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(200, 440, 3, 0, 2*Math.PI);
          this.context.stroke();
          // 绘制水平方向文本对齐方式
          this.context.font='15vp'
          this.context.textAlign = 'start';
          this.context.fillText('textAlign=start', 200,200);
          this.context.textAlign = 'end';
          this.context.fillText('textAlign=end', 200,260);
          this.context.textAlign = 'left';
          this.context.fillText('textAlign=left',200,320);
          this.context.textAlign = 'center';
          this.context.fillText('textAlign=center',200,380);
          this.context.textAlign = 'right';
          this.context.fillText('textAlign=right',200,440);
          //绘制 水平方向 5个参考点
          this.context.beginPath();
          this.context.arc(40, 100, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(120, 100, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(180, 100, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(280, 100, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(360, 100, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.beginPath();
          this.context.arc(280, 140, 3, 0, 2*Math.PI);
          this.context.stroke();
          // 绘制垂直方向文本对齐方式
          this.context.textBaseline = 'top';
          this.context.fillText('Top', 40, 100);
          this.context.textBaseline = 'bottom';
          this.context.fillText('Bottom', 120, 100);
          this.context.textBaseline = 'middle';
          this.context.fillText('Middle', 180, 100);
          this.context.textBaseline = 'alphabetic';     //文本基线是标准的字母基线
          this.context.fillText('Alphabetic', 280, 100);
          this.context.textBaseline = 'hanging';        //文本基线是悬挂基线
          this.context.fillText('Hanging', 360, 100);
          this.context.textBaseline = 'ideographic';     //文本基线是表意字基线
          this.context.fillText('Ideographic', 280, 140);

          this.context.strokeStyle = Color.Black;
          this.context.beginPath();
          this.context.arc(200, 500, 3, 0, 2*Math.PI);
          this.context.stroke();
          this.context.textBaseline = 'middle';
          this.context.textAlign = 'center';
          this.context.font='30vp'
          this.context.fillStyle = '#ff0000';
          this.context.fillText('HarmonyOS开发笔记', 200, 500);
        })
    }.width('100%').height('100%')
  }
}