了解CanvasRenderingContext2D.textBaseline

    简介

    ideographicCanvasRenderingContext2D.textBaseline用在文本绘制的时候,bottom这些关键字值,ideographichanging,可以指定文本对齐的基线。支持topmiddle,具体含义参见下面的语法。

    语法

    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;)
    =;)

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.textBaseline'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2019-10-18 01:44:06