CanvasContext.setTextBaseline

收藏

我的收藏

注意：该接口已停止维护，建议使用 Canvas 组件 V2

基础库 1.0.0 开始支持本方法，这是一个同步方法。

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

语法

CanvasContext.setTextBaseline(textBaseline)

参数说明

textBaseline

类型	默认值	必填	说明	最低支持版本
string		是	垂直方向的对齐方式	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

• Tip：本 API 仅适用于<canvas> 组件 V1。