CanvasRenderingContext2D.textBaseline

了解CanvasRenderingContext2D.textBaseline

简介

ideographic，CanvasRenderingContext2D.textBaseline用在文本绘制的时候，bottom这些关键字值，ideographic，hanging，可以指定文本对齐的基线。支持top，middle，具体含义参见下面的语法。

语法

context.textBaseline = value;

其中value支持如下几个关键字：

top

设定的垂直y坐标作为文本em区域（em区域可以看成中文字符占据的区域）的顶部。

hanging

hanging主要在藏文和其他印度文字中使用，我们了解即可。

middle

设定的垂直y坐标作为文本em区域的垂直中心位置。

alphabetic

默认值。表示的是正常文本的基线，可以看成是字母x的下边缘。也就是设定的垂直y坐标就是字母x的下边缘。

ideographic

ideographic主要在汉语、日语和韩语中使用。字面直译是表意基线。含义为：如果字符的主体突出在字母基线之下，则这是字符主体的底部。例如汉字“中”比字母x位置更低，因此，底部是汉字主体的底部。

bottom

设定的垂直y坐标作为文本em区域的底部。

案例

本案例主要展示不同的textBaseline属性值和文本对应的垂直位置关系：

相关代码如下：

var context = canvas.getContext('2d');

var baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
context.font = '30px STHeiti, SimHei';
context.strokeStyle = 'red';

baselines.forEach(function (baseline, index) {
    context.textBaseline = baseline;
    var y = 75 + index * 75;
    // 绘制参考线
    context.beginPath(); 
    context.moveTo(0, y + 0.5); 
    context.lineTo(550, y + 0.5); 
    context.stroke();
    // 填充文字
    context.fillText('AaXx一中-' + baseline, 0, y);
});

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:06