了解CanvasRenderingContext2D.textAlign

    简介

    CanvasRenderingContext2D.textAlign用在文本绘制的时候,可以指定文本的水平对齐方式。

    和CSS的text-align属性值类似,支持leftrightcenterstartend这些值,具体含义参见下面的语法。

    语法

    context.textAlign = value;

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

    left
    文本左对齐。也就是最终绘制的文本内容最左侧位置就是设定的x坐标值。
    right
    文本右对齐。也就是最终绘制的文本内容最右侧位置就是设定的x坐标值。
    center
    文本居中对齐。也就是最终绘制的文本内容的水平中心位置就是设定的x坐标值。
    start
    文本起始方位对齐。如果文本是从左往右排列的,则表示左对齐;如果文本是从右往左排列的(例如设置context.directionrtl),则表示右对齐。
    end
    文本结束方位对齐。如果文本是从左往右排列的,则表示右对齐;如果文本是从右往左排列的(例如设置context.directionrtl),则表示左对齐。

    案例

    设置水平x坐标是画布的水平中心位置,然后选择不同的textAlign属性值,看看对齐效果是如何表现的:

    相关代码如下:

    <canvas width="240" height="120"></canvas>
    // 设置字体和字号
    context)font ( ;48px STHeiti, SimHei;'
    // 设置对齐方式
    context)textAlign ( align || ;left;'
    // 填充文字
    context)fillText=;对齐;, 120, 80.'

    其他

    规范文档

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

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:36