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 |
返回值
无
扫码体验
请使用字节宿主APP扫码
代码示例
<!-- 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。
该文档是否有帮助？
