开发
API

CanvasContext.setTextBaseline

基础库 1.0.0 开始支持本方法。

设置文字垂直方向的对齐方式。不设置时表现默认为 alphabetic

语法

CanvasContext.setTextBaseline(textBaseline)

参数说明

参数类型默认值必填说明最低支持版本
textBaselinestring垂直方向的对齐方式1.0.0

textBaseline 合法值

说明最低支持版本
alphabetic默认值,文本基线是标准的字母基线1.0.0
top顶部对齐,文本基线在文本块的顶部1.0.0
hanging文本基线是悬挂基线1.0.0
middle文本基线在文本块的中间1.0.0
ideographic文字基线是表意字基线;如果字符本身超出了 alphabetic 基线,那么 ideograhpic 基线位置在字符本身的底部1.0.0
bottom文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母1.0.0

返回值

代码示例

<!-- index.ttml -->
<canvas canvas-id="myCanvas"></canvas>
// index.js
Page({
  data: {
    baselines: [
      "top",
      "hanging",
      "middle",
      "alphabetic",
      "ideographic",
      "bottom",
    ],
  },
  onLoad: function (options) {
    const canvasCtx = tt.createCanvasContext("myCanvas");
    const { baselines } = this.data;
    baselines.forEach(function (baseline, index) {
      canvasCtx.setTextBaseline(baseline);
      let y = 75 + index * 75;
      canvasCtx.beginPath();
      canvasCtx.moveTo(0, y + 0.5);
      canvasCtx.lineTo(550, y + 0.5);
      canvasCtx.stroke();
      canvasCtx.fillText("Abcdefghijklmnop (" + baseline + ")", 0, y);
    });
    canvasCtx.draw();
  },
});

Bug & Tip

点击纠错
评价此篇文档