了解CanvasRenderingContext2D.textAlign

    简介

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

    和CSS的text-align属性值类似，支持left，right，centerstart，end这些值，具体含义参见下面的语法。

    语法

    context.textAlign = value;

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

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

    案例

    设置水平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 2019-10-18 01:44:06

     返回顶部