文本对齐

Canvas textAlign属性详解,掌握left、right、center、start、end五种对齐方式。textAlign属性控制文本的水平对齐方式,决定文本相对于绘制坐标的位置。

基本语法

ctx.textAlign = 'left' | 'right' | 'center' | 'start' | 'end'

对齐方式说明

说明
left左对齐,文本在坐标右侧
right右对齐,文本在坐标左侧
center居中对齐,文本以坐标为中心
start起始对齐(默认),取决于文本方向
end结束对齐,取决于文本方向

基本对齐演示

五种对齐方式

对齐方向示意

// left: 坐标点在文本左侧
ctx.textAlign = 'left'
ctx.fillText('文本', 100, 50)  // 文本从x=100开始

// right: 坐标点在文本右侧
ctx.textAlign = 'right'
ctx.fillText('文本', 100, 50)  // 文本在x=100左侧结束

// center: 坐标点在文本中心
ctx.textAlign = 'center'
ctx.fillText('文本', 100, 50)  // 文本以x=100为中心

居中对齐应用

居中对齐应用

左右对齐应用

左右对齐布局

start与end

start和end取决于文本方向(direction属性):

  • 从左到右(ltr):start = left,end = right
  • 从右到左(rtl):start = right,end = left

start与end对比

动态对齐演示

动态切换对齐

注意事项

默认值

textAlign默认值为'start'。

不影响绘制位置

textAlign只影响文本相对于坐标的对齐,不改变坐标本身。

与measureText配合

可以结合measureText获取文本宽度进行精确定位。