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取决于文本方向(direction属性):
默认值
textAlign默认值为'start'。
不影响绘制位置
textAlign只影响文本相对于坐标的对齐,不改变坐标本身。
与measureText配合
可以结合measureText获取文本宽度进行精确定位。