canvascontext.settextbaseline(string textbaseline)
主体： 企业支付宝小程序 、 个人支付宝小程序
相关文档： 旧版 canvas 迁移指南
canvascontext.settextbaseline 设置文字的竖直对齐。
效果示例
代码示例执行效果
string textbaseline
文字垂直方向的对齐方式。默认为 alphabetic。
textbaseline 的合法值
| 枚举值 | 描述 | 兼容性 |
|---|---|---|
| top | 文本基线在文本块的顶部。 | - |
| hanging | 文本基线为悬挂基线。 | - |
| middle | 文本基线在文本块的中间。 | - |
| alphabetic | 文本基线是标准的字母基线。 | - |
| ideographic | 文字基线是表意字基线。如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。 | - |
| bottom | 文本基线在文本块的底部。 | - |
代码示例
.js
.axml
.acss
const ctx = my.createcanvascontext('canvas')
ctx.font = '36px serif'
ctx.strokestyle = 'red'
// 绘制辅助线和文字
ctx.beginpath()
ctx.moveto(0, 75)
ctx.lineto(550, 75)
ctx.stroke()
ctx.settextbaseline('top')
ctx.filltext('abcඛটɟʱ文字(top)', 0, 75)
ctx.beginpath()
ctx.moveto(0, 150)
ctx.lineto(550, 150)
ctx.stroke()
ctx.settextbaseline('hanging')
ctx.filltext('abcඛটɟʱ文字(hanging)', 0, 150)
ctx.beginpath()
ctx.moveto(0, 225)
ctx.lineto(550, 225)
ctx.stroke()
ctx.settextbaseline('middle')
ctx.filltext('abcඛটɟʱ文字(middle)', 0, 225)
ctx.beginpath()
ctx.moveto(0, 300)
ctx.lineto(550, 300)
ctx.stroke()
ctx.settextbaseline('alphabetic')
ctx.filltext('abcඛটɟʱ文字(alphabetic)', 0, 300)
ctx.beginpath()
ctx.moveto(0, 375)
ctx.lineto(550, 375)
ctx.stroke()
ctx.settextbaseline('ideographic')
ctx.filltext('abcඛটɟʱ文字(ideographic)', 0, 375)
ctx.beginpath()
ctx.moveto(0, 450)
ctx.lineto(550, 450)
ctx.stroke()
ctx.settextbaseline('bottom')
ctx.filltext('abcඛটɟʱ文字(bottom)', 0, 450)
ctx.draw()<canvas
id="canvas"
width="700"
height="600"
>canvas>#canvas {
width: 600px;
height: 500px;
}